Postcss-loader 没有缩小 CSS 输出

Posted 2023-02-22

【中文标题】Postcss-loader 没有缩小 CSS 输出

【英文标题】：Postcss-loader not minifying css output

【发布时间】：2019-02-02 03:37:18

【问题描述】：

在将 CSS 加载到 css-loader 以使用 css-modules 之前，我正在使用 webpack 和 postcss-loader 来自动添加前缀和缩小 CSS。我在缩小 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"
  

提前致谢。

【参考方案1】：

对于任何未来的读者：我通过将 cssnano 插件添加到配置中的 postcss-loader 解决了我的问题。因此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
      
    
  ]

【讨论】：

我以为 cssnano 的高级预设是自己做自动前缀的？