标签: cssnano

我正在使用webpack和postcss-loader来自动修复和缩小我的CSS,然后将其加载到css-loader中以使用css-modules.我在缩小CSS方面遇到了麻烦.通过webpack检查发出的.js文件显示CSS没有用cssnano缩小(因为我仍然可以看到空格字符).我究竟做错了什么？

一些相关的配置文件:

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

var postCompileScript = require('./postCompile');

module.exports = {
  entry: './src/popup.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { 
            loader: 'css-loader', 
            options: { 
              modules: true,
              localIdentName: '[local]__[hash:base64:6]',
              importLoaders: 1,
              minimize: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')({})
              ],
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: …

我正在尝试添加 cssnano 优化规则，但是使用 vue-cli，它似乎不起作用。我在中添加了以下脚本vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("cssnano")({
            preset: [
              "default",
              {
                discardComments: {
                  removeAll: true
                },
                mergeRules: true
              }
            ]
          })
        ]
      }
    }
  }
};

但它不起作用（见下面的截图）

屏幕截图 - cssnanomergeRules不适用：

我错过了什么？

我目前的工作 gulpfile.js：

    var postcss = require('gulp-postcss');
    var gulp = require('gulp');
    var cssnano = require('cssnano');

    gulp.task('css', function () {
        var plugins = [
            cssnano()
        ];
        return gulp.src('css/*.css')
            .pipe(postcss(plugins))
            .pipe(gulp.dest('css/min/'));
    });

Gulp 将所有的 CSS 传送到 PostCSS，后者通过 cssnano 运行它们，并且它们都在css/min 中。好的。

如何让 cssnano 使用高级转换？

理想情况下，使用变量或参数对象而不是外部配置脚本。我认为 anwser 可能在这个 cssnano guide page 上，但我不知道如何使它与 Gulp+PostCSS 一起工作。