Minify css from webpack's ExtractTextPlugin and style-loader

Question

In this tracer repo: https://github.com/pconerly/libsass-spritesmith-webpack-tracer

And this line: https://github.com/pconerly/libsass-spritesmith-webpack-tracer/blob/master/webpack.config.js#L82

I'm loading .scss, and extracting them into plaintext. I'd also like to minify them--- how do I do that? style-loader doesn't seem to have an option for it. Should I be using another plugin like css-loader instead?

Answer 1

So this will come automatically through the CSS loader unless you've explicitly disabled it. Since you're asking the question I'm assuming this means you have. The UglifyJsPlugin won't minify the CSS by itself if you're extracting and not minifying.

For my needs I needed to extract the CSS and then provide both a minified and non-minified version. So I ran into the same problem where I could have it minified or non-minified but not both.

I was able to get this to work using the optimize-css-assets plugin for Webpack. It will allow you to minify the CSS you've extracted using ExtractTextPlugin and you can set a RegEx rule similar to the UglifyJsPlugin settings.

By default this plugin uses the css-nano module for it's compression, although you can swap out to your preferred module if you wish.

Here's a basic configuration:

plugins: [
  new ExtractTextPlugin('[name].css'),
  new webpack.optimize.UglifyJsPlugin({
    compress: { warnings: false },
    include: /\.min\.js$/
  }),
  new OptimizeCssAssetsPlugin({
    assetNameRegExp: /\.min\.css$/,
    cssProcessorOptions: { discardComments: { removeAll: true } }
  })
]

Answer 2

I would suggest looking at postcss and postcss-loader. That way once you have it set up you can do lots of cool stuff to you CSS/SCSS without having to spend days fighting webpack first.