在 webpack 配置中将模块设置为 false 会破坏所有 css答案

【问题标题】：Setting modules to false in webpack config breaks all css在 webpack 配置中将模块设置为 false 会破坏所有 css
【发布时间】：2019-07-10 13:26:41
【问题描述】：

我有以下webpack 配置，一切正常：

    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    plugins: [
                        require('babel-plugin-transform-async-to-promises')
                    ]
                }
            },
            {
                test: /\.js$/,
                use: [ "source-map-loader" ],
                enforce: "pre"
            },
            {
                test: /\.(scss|css)$/,
                use: [ { loader:'style-loader'}, {loader : 'css-loader', options: {
                    modules: true,
                    sourceMap: IS_DEV,
                }}, {loader: 'sass-loader', options : {sourceMap: IS_DEV}} ]
            },
        ]
    },

但是，当我尝试将 modules 设置为 false 时，

            {
                test: /\.(scss|css)$/,
                use: [ { loader:'style-loader'}, {loader : 'css-loader', options: {
                    modules: false,
                    sourceMap: IS_DEV,
                }}, {loader: 'sass-loader', options : {sourceMap: IS_DEV}} ]
            },

我项目的所有 css 都停止工作。如何在将 modules 设置为 false 时修复我的 CSS？

【问题讨论】：

标签： webpack sass css-loader css-modules webpack.config.js

【解决方案1】：

我认为这与您如何在组件中应用 css 类有关是否启用了 css 模块有关。
如果不使用 CSS 模块，则在组件中指定文字 CSS 类名称，而启用 CSS 模块时，则转而指定由 webpack 生成的导入的 CSS 类变量。
综上所述，您可能希望根据在组件文件中应用 css 类的方式进行更改。

【讨论】：

【解决方案2】：

我通过用

替换 modules:false 解决了这个问题

modules: {
    localIdentName: IS_DEV ? '[local]' : '[hash:base64:5]'
},

这使得在开发模式（非生产模式）下运行时，css 类名是可见的，并且可以继续像在生产环境中一样工作。欲了解更多信息，请查看https://github.com/webpack-contrib/css-loader#modules

【讨论】：