A clean-css loader for webpack.
npm i -D clean-css-loader or yarn add clean-css-loader --dev
Use the loader either via your webpack config, CLI or inline.
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';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: {
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
}
}