使用cssnano和webpack一起配合压缩css、scss

1.安装node.js和npm
2.安装cssnano:

npm install cssnano --save-dev

3.安装postcss-cli

npm install postcss-cli --global

4.在项目的根目录创建一个postcss.config.js文件,配置cssnano

module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default'
        }),
    ],
};

5.在.postcssrc.js配置相关信息，如果没有，也在根目录创建

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "cssnano": {    //主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
      "cssnano-preset-advanced": {
        zindex: false,
        autoprefixer: false
      },
    }
  }
}

6.下载optimize-css-assets-webpack-plugin插件
7.配置webpack

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

plugins: [
   new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.scss$/g,
      cssProcessor: require('cssnano'),
      // cssProcessorOptions: cssnanoOptions,
      cssProcessorPluginOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true,
          },
          normalizeUnicode: false
        }]
      },
      canPrint: true
    }),
]
   

8.最后使用cnpm run build 打包，就可以看见压缩后的css文件。

tips

如果想要直接看见css压缩后的代码，可以自己创建一个input.css，在文件里面写上一些样式，然后在package.json配置相关信息

"scripts": {
  "minify":"postcss input.css>output.ccs"
}

执行cnpm run minify 就可以在output里面看到压缩后的样式文件。