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 production = false;

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

if (production) {
	cssUseList.push("clean-css-loader");
	// or with options
	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

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