12

在将其加载到 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': {}
  }
}

包.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"
  }
}

提前致谢。

4

1 回答 1

15

对于任何未来的读者：我通过将 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
      }
    }
  ]
}
于 2018-08-28T08:56:17.697 回答