Webpack - scss/css 模块样式未在产品中应用

Question

我正在使用 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 作业无法处理@变量，不确定它是否与 webpack/sass-loader 有关。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'        })    ]})

Answer 1

对于这行代码

test: /\.(sc|sa|c)ss$/,

                use: [

                    { loader: MiniCssExtractPlugin.loader },

                        {

                        loader: "css-loader",

我很确定你不能这样做，因为 scss 和 sass 需要有 sass 或 scss 加载器，所以如果你使用 css-loader 它不能处理 sass 或 scss

这是我的配置方式

module: {

        rules: [{

                test: /\.scss$/,

                use: [

                    'style-loader',

                    MiniCssExtractPlugin.loader,

                    {

                        loader: "css-loader",

                        options: {

                            minimize: true,

                            sourceMap: true

                        }

                    },

                    {

                        loader: "sass-loader"

                    }

                ]

            }

        ]

    }

你可以在这里查看我的完整配置