[英]How to configure cssnano for CSS minification?
I am trying to configure cssnano
plugin for the postcss-loader
, which minifies CSS, very similar, as described here .我想配置
cssnano
插件的postcss-loader
,其minifies CSS,非常相似,如所描述这里。
Webpack config:网络包配置:
...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
cssnano({
preset: ['default', {
discardComments: {
removeAll: true,
},
// how to find index of all available options?
}]
})
]
}
},
'sass-loader'
]
}
]
},
...
Here are listed all the optimisations from cssnano documentation这里列出了 cssnano 文档中的所有优化
And here is an example of how to override a single optimisation discardComments
on top of default
preset.这是一个如何在
default
预设之上覆盖单个优化discardComments
的示例。
Is it possible to override each optimisation configuration individually, like with discardComments
?是否可以单独覆盖每个优化配置,就像
discardComments
? This could be very handy in creating a separate configurations for dev and production.这在为开发和生产创建单独的配置时非常方便。
Also, in this repo is an unsuccessful attempt with minimal example and the boilerplate.此外,在这个 repo中,使用最少的示例和样板进行了一次不成功的尝试。
EDIT : cssnano devs told it is not possible to configure each optimisation individually, instead, it might be possible to use each optimisation plugin separately source编辑:cssnano 开发人员告诉它不可能单独配置每个优化,相反,可能可以单独使用每个优化插件源
Using cssnano
with postcss-loader
and mini-css-extract-plugin
is not the best option for minification in Webpack because the setup minifies individual source files instead of the whole emitted CSS file (it has excess white spaces).将
cssnano
与postcss-loader
和mini-css-extract-plugin
并不是在 Webpack 中进行缩小的最佳选择,因为设置会缩小单个源文件而不是整个发出的 CSS 文件(它有多余的空格)。 The best option is to use optimize-css-assets-webpack-plugin .最好的选择是使用optimize-css-assets-webpack-plugin 。
Install it:安装它:
npm install --save-dev optimize-css-assets-webpack-plugin
And use add it to you Webpack config:并使用将其添加到您的 Webpack 配置中:
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
...
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [] // Don't add cssnano here. Remove the loader completely if you have no plugins.
}
},
'sass-loader'
]
}
]
},
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({
// cssnano configuration
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true
}
}],
},
})
]
}
...
The cssnano options index: https://cssnano.co/optimisations/ cssnano 选项索引: https ://cssnano.co/optimisations/
But if you use style-loader
instead of mini-css-extract-plugin
, you should use postcss-loader
with cssnano
because optimize-css-assets-webpack-plugin
optimizes only the emitted CSS files.但是如果你使用
style-loader
而不是mini-css-extract-plugin
,你应该使用postcss-loader
和cssnano
因为optimize-css-assets-webpack-plugin
只优化发出的 CSS 文件。
You can view my full config here你可以在这里查看我的完整配置
Actually I use webpack shell plugin to run postcss command every time I build in dev mode实际上我每次在开发模式下构建时都使用webpack shell 插件来运行 postcss 命令
plugins: [
new WebpackShellPlugin({
onBuildStart: ['echo "Starting postcss command"'],
onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
})
],
So what it does is when the build done the postcss command will kick in to minify css file in wwwroot/dist所以它的作用是当构建完成时 postcss 命令将启动以缩小 wwwroot/dist 中的 css 文件
please find following steps to creat that
Minimize CSS files with cssnano
wpack.io uses postcss-loader and thereby PostCSS. So we can take advantage of it to minify our CSS/SASS files during production builds.
1
Install and use cssnano
npm i -D cssnano
or with
yarn add --dev cssnano
2
Edit postcss.config.js file
/* eslint-disable global-require, import/no-extraneous-dependencies */
const postcssConfig = {
plugins: [require('autoprefixer')],
};
// If we are in production mode, then add cssnano
if (process.env.NODE_ENV === 'production') {
postcssConfig.plugins.push(
require('cssnano')({
// use the safe preset so that it doesn't
// mutate or remove code from our css
preset: 'default',
})
);
}
module.exports = postcssConfig;
Save it and you are good to go.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.