Seamless integration between Rollup and PostCSS.
yarn add rollup-plugin-postcss --devYou are viewing the docs for v2.0 which only support Rollup 1.0 or above.
// rollup.config.jsimportpostcssfrom'rollup-plugin-postcss'exportdefault{plugins: [postcss({plugins: []})]}Then you can use CSS files:
import'./style.css'Note that the generated CSS will be injected to <head> by default, and the CSS string is also available as default export unless extract: true:
// Inject to `<head>` and also available as `style`importstylefrom'./style.css'It will also automatically use local PostCSS config files.
postcss({extract: true})postcss({modules: true,// Or with custom options for `postcss-modules`modules: {}})Install corresponding dependency:
- For
Sassinstallnode-sass:yarn add node-sass --dev - For
StylusInstallstylus:yarn add stylus --dev - For
LessInstallless:yarn add less --dev
That's it, you can now import .styl.scss.sass.less files in your library.
For Sass/Scss Only.
Similar to how webpack's sass-loader works, you can prepend the path with ~ to tell this plugin to resolve in node_modules:
@import"~bootstrap/dist/css/bootstrap";Type: string[]
Default: ['.css', '.sss', '.pcss']
This plugin will process files ending with these extensions and the extensions supported by custom loaders.
Type: Array
PostCSS Plugins.
Type: booleanobject
Default: true
Inject CSS into <head>, it's always false when extract: true.
You can also use it as options for style-inject.
Type: booleanstring
Default: false
Extract CSS to the same location where JS file is generated but with .css extension.
You can also set it to an absolute path.
Type: booleanobject
Default: false
Enable CSS modules or set options for postcss-modules.
Type: boolean
Default: true
Automatically enable CSS modules for .module.css.module.sss.module.scss.module.sass.module.styl.module.stylus.module.less files.
Type: booleanfunction
Default: false
Use named exports alongside default export.
You can supply a function to control how exported named is generated:
namedExports(name){// Maybe you simply want to convert dash to underscorereturnname.replace(/-/g,'_')}If you set it to true, the following will happen when importing specific classNames:
- dashed class names will be transformed by replacing all the dashes to
$sign wrapped underlines, eg.--=>$__$ - js protected names used as your style class names, will be transformed by wrapping the names between
$signs, eg.switch=>$switch$
All transformed names will be logged in your terminal like:
Exported "new" as "$new$"in test/fixtures/named-exports/style.cssThe original will not be removed, it's still available on default export:
importstyle,{class$_$name,class$__$name,$switch$}from'./style.css'console.log(style['class-name']===class$_$name)// trueconsole.log(style['class--name']===class$__$name)// trueconsole.log(style['switch']===$switch$)// trueType: booleanobject
Default: false
Minimize CSS, boolean or options for cssnano.
Type: boolean"inline"
Enable sourceMap.
Type: stringfunction
PostCSS parser, like sugarss.
Type: stringfunction
PostCSS Stringifier.
Type: stringfunction
PostCSS Syntax.
Type: boolean
Enable PostCSS Parser support in CSS-in-JS.
Type: booleanobject
Default: true
Load PostCSS config file.
Type: string
The path to config file, so that we can skip searching.
Type: object
ctx argument for PostCSS config file.
Note: Every keys you pass to config.ctx will be available under options inside
the postcss config.
// rollup.config.jspostcss({config: {ctx: {foo: 'bar'}}})// postcss.config.jsmodule.exports=context=>{console.log(context.options.foo)// 'bar'return{}}Type: name[][name, options][]
Default: ['sass', 'stylus', 'less']
Use a loader, currently built-in loaders are:
sass(Support.scssand.sass)stylus(Support.styland.stylus)less(Support.less)
They are executed from right to left.
Type: Loader[]
An array of custom loaders, check out our sass-loader as example.
interfaceLoader{name: string,test: RegExp,process: (this: Context,input: Payload)=>Promise<Payload>|Payload}interfaceContext{/** Loader options */
options: any/** Sourcemap */
sourceMap: any/** Resource path */
id: string/** Files to watch */
dependencies: Set<string>/** Emit a waring */warn: PluginContext.warn/** https://rollupjs.org/guide/en#plugin-context */
plugin: PluginContext}interfacePayload{/** File content */
code: string/** Sourcemap */map?: string|SourceMap}Type: id => void
A function to be invoked when an import for CSS file is detected.
MIT © EGOIST