rollup-plugin-postcss
Daniela HartmannInstall
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,
// Or with custom file name
extract: 'dist/my-custom-file-name.css'
})
CSS modules
postcss({
modules: true,
// Or with custom options for `postcss-modules`
modules: {}
})
With Sass/Stylus/Less
Install corresponding dependency:
For Sass install node-sass: yarn add node-sass --dev
For Stylus Install stylus: yarn add stylus --dev
For Less Install less: 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";