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类有关是否启用CSS模块有关。
如果不使用CSS模块，则可以在组件中指定文字CSS类名称，而启用CSS模块时，可以指定由webpack生成的导入的CSS类变量。
综上所述，您可能希望根据在组件文件中应用CSS类的方式进行更改。

Answer 2

我通过用

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

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

这使得在dev模式下（而非生产环境）运行时，css类名是可见的，并继续与生产环境相同。有关更多信息，请查看https://github.com/webpack-contrib/css-loader#modules

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

2 个答案: