clean-css-loader

A clean-css loader for webpack.

clean-css-loader

Getting Started

To begin, you'll need to install clean-css-loader:

yarn add -D clean-css-loader

Then add the plugin to your webpack config. For example:

// webpack.config.js
const isProduction = process.env.NODE_ENV === "production";

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "clean-css-loader",
            options: {
              // Loader options
              disable: !isProduction,
              skipWarn: false,

              // CleasCSS options
              compatibility: "ie9",
              level: 2,
              inline: ["remote"],
              //...
            },
          },
        ],
      },
    ],
  },
};

Or using plugin inline:

// default
import "style-loader!css-loader!clean-css-loader!./style.css";
// with options
import "style-loader!css-loader!clean-css-loader?level=2!./style.css";

Options

disable: boolean

This option enables/disables minify, useful to easily disable on development mode (default: false)

skipWarn: boolean

This option enables/disables output warnings (default: false)

sourceMap: boolean

Enables/Disables generation of source maps. (default: compiler.devtool)

CleanCSS module options

• clean-css/clean-css#constructor-options

Changelog

4.2.1

• Fix passing loader options when using this.getOptions() from webpack 5.x.x

  import "clean-css-loader?skipWarn=true!./style.css"; 
  // {skipWarn: true  } loader-utils@2.x.x
  // {skipWarn: 'true'} webpack@5.x.x, unexpected behavior :(
  

  loader-utils has specific behavior for parsing query strings (true, false and null won't be parsed as string but as a primitive value)