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

Question

我有以下 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？

Answer 1

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

Answer 2

我通过将 modules:false 替换为

解决了这个问题

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

这使得当运行处于开发模式（非生产模式）时，css 类名是可见的并且继续像在生产模式中一样工作。有关详细信息，请查看 https://github.com/webpack-contrib/css-loader#modules

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

Setting modules to false in webpack config breaks all css

webpack

sass

css-loader

css-modules

webpack.config.js