Interface CSSOptions

interface CSSOptions {
    devSourcemap?: boolean;
    lightningcss?: LightningCSSOptions;
    modules?: false | CSSModulesOptions;
    postcss?: string | ProcessOptions<Document_ | Root_> & {
        plugins?: AcceptedPlugin[];
    };
    preprocessorMaxWorkers?: number | true;
    preprocessorOptions?: Record<string, any>;
    transformer?: "lightningcss" | "postcss";
}

Properties

devSourcemap? lightningcss? modules? postcss? preprocessorMaxWorkers? preprocessorOptions? transformer?

Properties

Optional Experimental devSourcemap

devSourcemap?: boolean

Enables css sourcemaps during dev

Default

false
@experimental

Optional Experimental lightningcss

lightningcss?: LightningCSSOptions

Optional modules

modules?: false | CSSModulesOptions

https://github.com/css-modules/postcss-modules

Optional postcss

postcss?: string | ProcessOptions<Document_ | Root_> & {
    plugins?: AcceptedPlugin[];
}

Optional Experimental preprocessorMaxWorkers

preprocessorMaxWorkers?: number | true

If this option is set, preprocessors will run in workers when possible. true means the number of CPUs minus 1.

Default

0
@experimental

Optional preprocessorOptions

preprocessorOptions?: Record<string, any>

Options for preprocessors.

In addition to options specific to each processors, Vite supports additionalData option. The additionalData option can be used to inject extra code for each style content.

Optional Experimental transformer

transformer?: "lightningcss" | "postcss"

Using lightningcss is an experimental option to handle CSS modules, assets and imports via Lightning CSS. It requires to install it as a peer dependency. This is incompatible with the use of preprocessors.

Default

'postcss'
@experimental

Settings

Member Visibility

Theme

On This Page

devSourcemaplightningcssmodulespostcsspreprocessorMaxWorkerspreprocessorOptionstransformer