Webpack - scss/css 模塊樣式未在產(chǎn)品中應用
我正在使用 scss 模塊,所以我styleName在我的反應組件中使用,一切都在dev. 中的元素prod看起來像<div class="row" stylename="table"></div>但沒有應用樣式table。webpack 配置被拆分成多個文件(webpack.profile.js, webpack.base.js, webpack.dev.js, webpack.prod.js)旁注:我還注意到某些 jenkins 作業(yè)無法處理@變量,不確定它是否與 webpack/sass-loader 有關(guān)。webpack.profile.jsconst path = require('path')const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')const CleanWebpackPlugin = require('clean-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const CompressionPlugin = require('compression-webpack-plugin')const VisualizerPlugin = require('webpack-visualizer-plugin')module.exports = require('./webpack.base')({ mode: 'production', devServer: { port: 3000, contentBase: path.join(process.cwd(), 'dist/') }, optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true }), new OptimizeCSSAssetsPlugin() ] }, module: { rules: [ { test: /\.(sc|sa|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader }, { loader: "css-loader", options: { modules: true, sourceMap: true, localIdentName: "[name]_[local]_[hash:base64:5]" } } ] } ] }, plugins: [ new CompressionPlugin({ test: /\.(js|css|html)$/ }), new VisualizerPlugin({ filename: '../stats/bundleStats.html' }), new MiniCssExtractPlugin({ filename: '[name].[hash].css', chunkFilename: '[id].[hash].css' }) ]})
查看完整描述