clean-css-loader

A clean-css loader for webpack.

clean-css-loader

Install

yarn add -D clean-css-loader

Usage

Use the loader either via your webpack config, CLI or inline.

Via webpack config (recommended)

webpack.config.js

const isProductionMode = process.env.NODE_ENV === "production";

const cssLoaders = ["style-loader", "css-loader"];

if (isProductionMode) {
  // push loader for production mode only
  cssLoaders.push("clean-css-loader");

  // exmaple with options
  cssLoaders.push({
    loader: "clean-css-loader",
    options: {
      compatibility: "ie9",
      level: 2,
      inline: ["remote"],
    },
  });
}

module.exports = {
  mode: isProductionMode ? "production" : "development",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssLoaders,
      },
    ],
  },
};

In your application

import cssMin from "style.css";

CLI

webpack --module-bind 'css=style-loader!css-loader!clean-css-loader'

In your application

import cssMin from "style.css";

Inline

In your application

import cssMin from "style-loader!css-loader!clean-css-loader!./style.css";

Options

skipWarn default: false

This option disable output warnings

More option: https://github.com/jakubpawlowicz/clean-css#constructor-options

Webpack 1.x

Example config (for webpack 1.x):

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "css!clean-css",
      },
      {
        test: /\.styl$/,
        loader: "css!clean-css!stylus?reslve url",
      },
      //...
    ],
    // Example Set options (Key "clean-css" or cleancss or CleanCSS):
    "clean-css": {
      debug: true,
      mediaMerging: true,
    },
  },
};

Changelog

3.0.0

• Drop support node v8
• Update loader-utils to the latest version
• Update webpack peer dependencies limit (thanks @daniele-orlando #15)
• Update dev dependency
• Update webpack e2e tests from webpack@4 => webpack@5