rollup-plugin-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,

// 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";

181 KB