Search code examples
rolluprollupjs

rollup , how to bundle .css and min.css at the same time

I use rollup with rollup-plugin-scss plugin in the project to bundle css. Is it possible to generate both .css and .min.css using this plugin or some other plugins?

plugins: [
        scss({
            output: path.resolve(__dirname, 'projects/project_name/main.css'),
        })
]

I tried to add outputStyle: "compressed" but this make only compressed version, not both.

Solution

  • It is not possible out of the box but you hook into the output option that also take a function as option and write both files manually (including a compression step). In the sample code below I used clean-css but there are plenty of other packages available.

    scss({
  output: function (styles, styleNodes) {
    fs.writeFileSync('bundle.css', styles)
    const compressed = new CleanCss().minify(styles).styles;
    fs.writeFileSync('bundle.min.css', compressed)
  }
})

    Note that this setup does not have any logging or filesizes or anything as you get it from the regular plugin, but this is something that can be added fairly easily into the function.