Question

我正在使用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: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production',
  resolve: {
    alias: {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    },
    extensions: ['.js', '.jsx']
  }
};

postcss.config.js ：

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {},
    'cssnano': {}
  }
}

package.json

{
  "name": "REDACTED",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./webpack.config.js",
    "deploy": "node ftp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.1.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.0",
    "ftp": "^0.3.10",
    "post-compile-webpack-plugin": "^0.1.2",
    "postcss-loader": "^3.0.0",
    "prepend-file": "^1.3.1",
    "style-loader": "^0.22.1",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "iframe-resizer": "^3.6.1",
    "js-cookie": "^2.2.0",
    "npm": "^6.4.0",
    "preact": "^8.3.1",
    "preact-compat": "^3.18.3",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-iframe-resizer-super": "^0.2.0"
  }
}

谢谢。

Answer 1

对于任何将来的读者：我只需在配置中的postcss-loader中添加cssnano插件即可解决我的问题。因此，css规则如下（webpack.config.js）：

{
  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')({}),
          require('cssnano')({ preset: 'default' })
        ],
        minimize: true
      }
    }
  ]
}

Answer 2

我遇到了同样的问题，但是Tijs的解决方案对我不起作用。

我有一个最小的postcss.config.js文件：

module.exports = ({ env }) => {
  return ({
    plugins: [
      require('cssnano')({ safe: true })
    ],
  });
}

我的.scss文件的webconfig模块规则是这样的：

{
  test: /\.scss$/,
  oneOf: [{
    resourceQuery: /^\?raw$/,
    use: [MiniCssExtractPlugin.loader, {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        camelCase: false,
        localIdentName: '[local]',
      },
    }, 'sass-loader', {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('cssnano')({ safe: true })
        ],
        minimize: true
      }
    }],
  }, {
    use: [MiniCssExtractPlugin.loader, {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        camelCase: true,
        localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
      },
    }, 'sass-loader', {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('cssnano')({ safe: true })
        ],
        minimize: true
      }
    }],
  }]
}

无论是否在webconfig文件中指定了插件，它始终无法运行，并且不会缩小CSS。尝试使用其他插件，例如autoprefixer都可以。

postcss-loader不会缩小css输出

2 个答案: