A clean-css loader for webpack.
yarn add -D clean-css-loaderUse the loader either via your webpack config, CLI or inline.
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";webpack --module-bind 'css=style-loader!css-loader!clean-css-loader'In your application
import cssMin from "style.css";In your application
import cssMin from "style-loader!css-loader!clean-css-loader!./style.css";This option disable output warnings
More option: https://github.com/jakubpawlowicz/clean-css#constructor-options
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,
},
},
};