clean-css-loader

A clean-css loader for webpack.

Install

npm install --save-dev 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;

let css_arr_use = [ 'style-loader', 'css-loader' ];

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

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

In your application

import css_min from 'style.css';

CLI

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

In your application

import css_min from 'style.css';

Inline

In your application

import css_min from 'style-loader!css-loader!clean-css-loader!./style.css';

Options

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

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