从css-loader启用CSS模块不允许导入node_modules CSS

Question

我在webpack上有一个CSS模块规则

{
            test: /\.css$/,
            loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
}

启用modules modules=true会给我以下错误：

ERROR in ./node_modules/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./src/global.css
Module not found: Error: Can't resolve '~/antd/dist/antd.css' in '[REDACTED]'
 @ ./node_modules/css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!./src/global.css 3:10-141
 @ ./src/global.css
 @ ./src/entry.jsx

这发生在CSS线上

@import '~/antd/dist/antd.css';

antd是antd中的依赖node_modules 。

但是，从加载器中删除modules=true似乎不会从此导入行生成错误。

我需要CSS模块，我需要导入这个CSS。 我怎样才能解决这个问题？

Answer 1

您可以通过设置配置来停止css-loader来解释@import语句，如下所示

{
    test: /\.css$/,
    use: [ 
        {
            loader:'style-loader'
        }, 
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]',
                import: false
            }
        } 
    ]
}

Answer 2

不幸的是，这是CSS-loader的一个已知问题 。 启用模块时，@ @import s无法正常工作。

对此有一个丑陋的解决方案，但仍然是一个解决方案。

我做的是用这个替换了规则：

        {
            test: /^((?!\.module).)*css$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                }
            ]
        },
        {
            test: /\.module.css$/,
            loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
        },

在上面的例子中需要@import CSS文件现在可以使用，但是这些文件不能作为CSS模块在javascript中导入。

应该是模块化的CSS文件必须以文件扩展名.module.css结尾.module.css使CSS模块正常工作。