Webpack extract-text-webpack-plugin and css-loader minification

Question

I am having problem minimizing the css file output by the extract-text-webpack-plugin

/* webpack.config.js */
...
loader: [{test: /\.css$/, loader: ExtractTextPlugin.extract('css?minimize')}]
...
plugins: [new ExtractTextPlugin("styles.css")]
...

/* test.js */
require('./file1.css')

/* file1.css */
@import './file2.css';
body {color: green;}
body {font-size: 1rem;}

/* file2.css */
body {border: 1px solid;}
body {background: purple;}

/* the output styles.css */
body{color:green;font-size:1rem}body{border:1px solid;background:purple}

In the resulting styles.css, there are 2 body tags. It seems that minifications are performed within a file (within file1.css and within file2.css) but not when the two files are combined and extracted into the final styles.css.

How can minification be performed on the final style.css? So the output is

body{color:green;font-size:1rem;border:1px solid;background:purple}

score 48 · Accepted Answer · answered Jan 12 '16 at 15:38

48

You could use optimize-css-assets-webpack-plugin, which was created to solve this exact issue.

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin()
]

answered Jan 12 '16 at 15:38

Alexandre Kirszenberg

35,938
10
88
72

1

Will test against using `cssnano` standalone after webpack. If equivalent, I guess it will be the best answer and I will award you the bounty. Thanks for the info. Out of curiosity, the project was created 4 days ago (for reference, January 8th, 2016), how did you find it? – Matt Jan 12 '16 at 18:27
I googled the issue, and strangely enough this project was on the first page of Google. I must have used the right set of keywords :) – Alexandre Kirszenberg Jan 12 '16 at 18:46
I can confirm that this as the same net result as running `cssnano` on the generated `bundle.css` file ... but directly within webpack. This is excellent news! Bounty awarded. – Matt Jan 15 '16 at 18:38
Should it work with sourceMap option? Because for me `optimize-css-assets-webpack-plugin` and `cssnano` break source maps - when I use the first one all rules point to compiled .css file instead .scss source file, when I use `cssnano` rules point to source file, but always to the end of the file. – van_folmert Dec 20 '16 at 11:12
Awesome !! Thank you so much !! :) – KodeFor.Me Sep 16 '18 at 17:09

score 2 · Answer 2 · answered Apr 11 '17 at 14:33

2

For css minification you may use the webpack's CSS-loader with the "minimize" option. It solved the problem in my case:

webpack.config.js

...
module: {
   rules: [
      {
         test: /\.css$/,
         use: [{
            loader: "css-loader",
            options: {
               minimize: true
            }
         }
      },
   ]
},
...

answered Apr 11 '17 at 14:33

Paul Basenko

895
1
9
22

This solved it for me! And perhaps an easier solution instead of installing another plugin. – Olly Jul 28 '17 at 18:14
As of May 2019, css-loader does not have such option. https://github.com/webpack-contrib/css-loader#options – Miro J. May 01 '19 at 19:48

score 0 · Answer 3 · answered Aug 24 '18 at 22:51

Paul's answer has stopped working with breaking change in 1.0.0 Minimize and some other options has been removed from options.

The recommended solution is to use optimize-cssnano-plugin. This plugin works better with source maps than optimize-css-assets-webpack-plugin.

Example:

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssnanoPlugin({
        sourceMap: nextSourceMap,
        cssnanoOptions: {
        preset: ['default', {
            discardComments: {
            removeAll: true,
            },
        }],
        },
    }),
]

Webpack extract-text-webpack-plugin and css-loader minification

3 Answers3