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}

Alexandre Kirszenberg · Accepted Answer · 2016-01-12 15:38:29Z

48

+500

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, 2016 at 15:38

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Over a year ago

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?

Alexandre Kirszenberg Over a year ago

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 :)

Matt Over a year ago

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.

van_folmert Over a year ago

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.

Paul Basenko · Accepted Answer · 2017-04-11 14:33:22Z

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, 2017 at 14:33

Paul Basenko

1,0251 gold badge11 silver badges22 bronze badges

2 Comments

Olly Over a year ago

This solved it for me! And perhaps an easier solution instead of installing another plugin.

Miro J. Over a year ago

As of May 2019, css-loader does not have such option. github.com/webpack-contrib/css-loader#options

Black · Accepted Answer · 2018-08-24 22:51:37Z

0

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,
            },
        }],
        },
    }),
]

answered Aug 24, 2018 at 22:51

Black

10.5k3 gold badges58 silver badges60 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related