从 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=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 是 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

不幸的是，这是 a known issue with CSS-loader。 @import启用模块后无法正常工作。

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

我所做的是将规则替换为：

        {
            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]'
        },

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

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

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

Enabling CSS Modules from css-loader disallows importing node_modules CSS

javascript

node.js

webpack

css-loader