clean-css-loader

A clean-css loader for webpack.

Clean-CSS-loader

Install

npm i -D clean-css-loader or yarn add clean-css-loader --dev

Usage

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

Via webpack config (recommended)

webpack.config.js

const production = false;

const cssUseList = [ 'style-loader', 'css-loader' ];

if(production){
  cssUseList.push('clean-css-loader');
  // or
  cssUseList.push({
    loader: 'clean-css-loader',
    options: {
      compatibility: 'ie9',
      level: 2,
      inline: ['remote']
    }
  });
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssUseList
      }
    ]
  }
}

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

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

Webpack 1.x

Example config (for webpack 1.x):

...
  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
    }
  }