You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用CSS Modules时Webpack生产构建报错求助

Webpack生产构建CSS Modules报错求助

生产构建时出现如下报错:

Error
1 | // extracted by mini-css-extract-plugin
2 | export default {"lala":"hQupzgS9tEJmjp6wWbAk"};

报错截图
(注:lala为自定义类名)

CSS Modules在开发环境运行完全正常,修改样式可实时生效,但生产构建阶段触发上述错误。已尝试更新所有相关依赖包,当前依赖版本如下:

"workbox-background-sync": "^6.5.4",
"workbox-broadcast-update": "^6.5.4",
"workbox-cacheable-response": "^6.5.4",
"workbox-core": "^6.5.4",
"workbox-expiration": "^6.5.4",
"workbox-google-analytics": "^6.5.4",
"workbox-navigation-preload": "^6.5.4",
"workbox-precaching": "^6.5.4",
"workbox-range-requests": "^6.5.4",
"workbox-recipes": "^6.1.5",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^6.5.4",
"workbox-streams": "^6.5.4",
"workbox-webpack-plugin": "6.5.4",

"mini-css-extract-plugin": "^2.7.0",
"node-sass": "^8.0.0",
"optimize-css-assets-webpack-plugin": "^6.0.0",
"postcss-flexbugs-fixes": "^5.0.0",
"postcss-loader": "^7.0.0",
"postcss-normalize": "^10.0.0",
"postcss-preset-env": "^8.0.0",
"postcss-safe-parser": "^6.0.0",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-manifest-plugin": "^5.0.0"

我的Webpack生产环境配置文件内容如下:

module.exports = merge(common, {
  mode: 'production',
  output: {
    path: paths.build,
    publicPath: '/',
    filename: 'js/[name].[contenthash].bundle.js',
    crossOriginLoading: 'anonymous'
  },
  plugins: [
    //style-loader is for development, MiniCssExtractPlugin is for production
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
      chunkFilename: 'styles/[name].[contenthash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(scss|css)$/i,
        exclude: /node_modules\/@fullcalendar/,
        use: [
          { loader: MiniCssExtractPlugin.loader, options: {} },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true,
              sourceMap: false
            }
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  require('postcss-preset-env')({
                    autoprefixer: {
                      flexbox: 'no-2009'
                    },
                    stage: 3
                  }),
                  postcssNormalize()
                ],
                sourceMap: false
              }
            }
          },
          { loader: 'sass-loader', options: {} }
        ]
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          parser: safePostCssParser,
          map: false
            ? {
                inline: false,
                annotation: true
              }
            : false
        },
        cssProcessorPluginOptions: {
          preset: ['default', { minifyFontValues: { removeQuotes: false } }]
        }
      }),
      new TerserPlugin()
    ]
  }
})

已尝试多种方法仍无法解决该问题,恳请提供解决方案。

内容的提问来源于stack exchange,提问作者Vishwesh Bajpai

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.30 04:55:19