README
rollup-plugin-postcss
Seamless integration between Rollup and PostCSS.
Install
yarn add rollup-plugin-postcss --dev
Usage
You are viewing the docs for v2.0
which only support Rollup 1.0 or above.
// rollup.config.js
import postcss from 'rollup-plugin-postcss'
export default {
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`
import style from './style.css'
It will also automatically use local PostCSS config files.
Extract CSS
postcss({
extract: true
})
CSS modules
postcss({
modules: true,
// Or with custom options for `postcss-modules`
modules: {}
})
With Sass/Stylus/Less
Install corresponding dependency:
- For
Sass
installnode-sass
:yarn add node-sass --dev
- For
Stylus
Installstylus
:yarn add stylus --dev
- For
Less
Installless
:yarn add less --dev
That's it, you can now import .styl
.scss
.sass
.less
files in your library.
imports
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";
Options
extensions
Type: string[]
Default: ['.css', '.sss', '.pcss']
This plugin will process files ending with these extensions and the extensions supported by custom loaders.
plugins
Type: Array
PostCSS Plugins.
inject
Type: boolean
object
Default: true
Inject CSS into <head>
, it's always false
when extract: true
.
You can also use it as options for style-inject
.
extract
Type: boolean
string
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.
modules
Type: boolean
object
Default: false
Enable CSS modules or set options for postcss-modules
.
autoModules
Type: boolean
Default: true
Automatically enable CSS modules for .module.css
.module.sss
.module.scss
.module.sass
.module.styl
.module.stylus
.module.less
files.
namedExports
Type: boolean
function
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 underscore
return name.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