rollup-plugin-styles's full option list

interface Options {
    alias?: Record<string, string>;
    autoModules?: boolean | RegExp | (id: string) => boolean;
    config?: boolean | PostCSSConfigLoaderOptions;
    dts?: boolean;
    exclude?: null | string | RegExp | readonly (string | RegExp)[];
    extensions?: string[];
    import?: boolean | ImportOptions;
    include?: null | string | RegExp | readonly (string | RegExp)[];
    less?: LESSLoaderOptions;
    loaders?: Loader[];
    minimize?: boolean | Options;
    mode?:
        | "emit"
        | "inject"
        | "extract"
        | ["inject"]
        | ["inject", InjectOptions | (varname: string, id: string) => string]
        | ["extract"]
        | ["extract", string]
        | ["emit"];
    modules?: boolean | ModulesOptions;
    namedExports?: boolean | (name: string) => string;
    onExtract?: (data: ExtractedData) => boolean;
    onImport?: (code: string, id: string) => void;
    parser?: string | Parser;
    plugins?:
        | Record<string, unknown>
        | (
            | undefined
            | null
            | string
            | AcceptedPlugin
            | [string | PluginCreator<unknown>]
            | [string | PluginCreator<unknown>, Record<string, unknown>]
        )[];
    sass?: SASSLoaderOptions;
    sourceMap?:
        | boolean
        | "inline"
        | [boolean | "inline"]
        | [boolean | "inline", SourceMapOptions];
    stringifier?: string | Stringifier;
    stylus?: StylusLoaderOptions;
    syntax?: string | Syntax;
    to?: string;
    url?: boolean | UrlOptions;
    use?: string[];
}

Properties

alias?: Record<string, string>

Aliases for URL and import paths

  • ex.: {"foo":"bar"}
autoModules?: boolean | RegExp | (id: string) => boolean

Automatically enable CSS Modules for files named [name].module.[ext] (e.g. foo.module.css, bar.module.stylus), or pass your own function or regular expression

false
config?: boolean | PostCSSConfigLoaderOptions

Enable/disable or pass options for PostCSS config loader

true
dts?: boolean

Generate TypeScript declarations files for input style files

false
exclude?: null | string | RegExp | readonly (string | RegExp)[]

Files to exclude from processing

extensions?: string[]

PostCSS will process files ending with these extensions

[".css", ".pcss", ".postcss", ".sss"]
import?: boolean | ImportOptions

Enable/disable or pass options for CSS @import resolver

true
include?: null | string | RegExp | readonly (string | RegExp)[]

Files to include for processing

Options for Less loader

loaders?: Loader[]

Array of custom loaders

minimize?: boolean | Options

Enable/disable or pass options for cssnano

false
mode?:
    | "emit"
    | "inject"
    | "extract"
    | ["inject"]
    | ["inject", InjectOptions | (varname: string, id: string) => string]
    | ["extract"]
    | ["extract", string]
    | ["emit"]

Select mode for this plugin:

  • "inject" (default) - Embeds CSS inside JS and injects it into <head> at runtime. You can also pass options for CSS injection. Alternatively, you can pass your own CSS injector.
  • "extract" - Extract CSS to the same location where JS file is generated but with .css extension. You can also set extraction path manually, relative to output dir/output file's basedir, but not outside of it.
  • "emit" - Emit pure processed CSS and pass it along the build pipeline. Useful if you want to preprocess CSS before using it with CSS consuming plugins.
"inject"
modules?: boolean | ModulesOptions

Enable/disable or pass options for CSS Modules

false
namedExports?: boolean | (name: string) => string

Use named exports alongside default export. You can pass a function to control how exported name is generated.

false
onExtract?: (data: ExtractedData) => boolean

Function which is invoked on CSS file extraction. Return boolean to control if file should be extracted or not.

onImport?: (code: string, id: string) => void

Function which is invoked on CSS file import, before any transformations are applied

parser?: string | Parser

Set PostCSS parser, e.g. sugarss. Overrides the one loaded from PostCSS config file, if any.

plugins?:
    | Record<string, unknown>
    | (
        | undefined
        | null
        | string
        | AcceptedPlugin
        | [string | PluginCreator<unknown>]
        | [string | PluginCreator<unknown>, Record<string, unknown>]
    )[]

A list of plugins for PostCSS, which are used before plugins loaded from PostCSS config file, if any

Options for Sass loader

sourceMap?:
    | boolean
    | "inline"
    | [boolean | "inline"]
    | [boolean | "inline", SourceMapOptions]

Enable/disable or configure sourcemaps

false
stringifier?: string | Stringifier

Set PostCSS stringifier. Overrides the one loaded from PostCSS config file, if any.

Options for Stylus loader

syntax?: string | Syntax

Set PostCSS syntax. Overrides the one loaded from PostCSS config file, if any.

to?: string

to option for PostCSS, required for some plugins

url?: boolean | UrlOptions

Enable/disable or pass options for CSS URL resolver

true
use?: string[]

Array of loaders to use, executed from right to left. Currently built-in loaders are:

  • sass (Supports .scss and .sass files)
  • less (Supports .less files)
  • stylus (Supports .styl and .stylus files)
["sass", "less", "stylus"]