使用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
相关产品推荐
相关产品推荐

