从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: /^((?!\.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 文件现在可以工作，但是这些文件不能在 javascript 中作为 CSS 模块导入。

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