0

在 VueJS 和 Webpack 5 中使用 CSS 模块时，所有类都从 CSS 包中删除。

在 css-loader 的选项中，如果我有 modules: true CSS 包是完全空的。

如果我将其注释掉，则 CSS 包与预期的一样，删除了所有未使用的类，但是 JS 包不再具有组件元素上的 CSS 类。

如果我将 SCSS 文件添加到条目中并且不使用 CSS 模块，则 CSS 包也是正确的。

问题似乎出在组合模块时：true 和 purgecss。

版本：

"webpack": "^5.26.1"

"postcss-loader": "^5.2.0"

"postcss-preset-env": "^6.7.1"

这是我的 Webpack 配置：

const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.config');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require('path')
const glob = require("glob");

const prodConfig = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCSSExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: { modules: true },
          },
          {
            loader: "postcss-loader",
              options: {
                postcssOptions: {
                  plugins: [
                    "postcss-flexbugs-fixes",
                    "autoprefixer",
                    "postcss-preset-env",
                    [
                      "@fullhuman/postcss-purgecss",
                      {
                        content: [
                          path.join(__dirname, "./public/index.html"),
                          ...glob.sync(
                            `${path.join(__dirname, "src")}/**/*.vue`,
                            {
                              nodir: true,
                            }
                          ),
                        ],
                      },
                    ],
                  ],
                },
              }
          },
          'sass-loader',
        ],
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCSSExtractPlugin({
      filename: 'style.[fullhash].css',
    }),
  ],
};

if (process.env.BUNDLE_ANALYZER) {
  prodConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = merge(commonConfig, prodConfig);
4

0 回答 0