0

I'm trying to pass options to css loader, with new Webpack 2 config:

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    loader: 'css-loader',
    options: {
      minimize: {
        discardComments: {
          removeAll: true,
        }
      },
    },
  }),
},

But the options are not working. What I am doing wrong?

Matheus Lima
  • 2,103
  • 3
  • 31
  • 49

1 Answers1

0

Minimize doesn't seem to have the parameters you are trying to call it with:

By default the css-loader minimizes the css if specified by the module system.

In some cases the minification is destructive to the css, so you can provide some options to it. cssnano is used for minification and you find a list of options here.

You can also disable or enforce minification with the minimize query parameter.

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        minimize: true || {/* CSSNano Options */}
      }
    }
  ]
}

Inside your ExtractTextPlugin.extract(), you shouldn't use loader and options, but rather use, fallback and publicPath (see docu). The use parameter takes the same parameters as the use parameter of the loader itself, so in the end you should get something like:

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback : 'style-loader',
    use : {
      loader: 'css-loader',
      options: {
        minimize: true || {/* CSSNano Options */}
      }
    }
  })
}

See https://github.com/webpack-contrib/css-loader See https://github.com/webpack-contrib/extract-text-webpack-plugin

Iris Schaffer
  • 804
  • 8
  • 18
  • How to do this with Extract Text Plugin? i.e. How to pass options to css-loader when we use Extract Text Plugin in css-loader's place? – XPD Nov 25 '17 at 08:59
  • The `use` description up there can also be used inside `ExtractTextPlugin.extract({})`. It takes `use` and `fallback`, according to the official documentation: https://github.com/webpack-contrib/extract-text-webpack-plugin – Iris Schaffer Nov 26 '17 at 20:15