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语句

{  
    "requestStatus":{  
        "success":false,
        "error":{  
            "errorCode":"4",
            "errorMessage":"Missing API Key"
        }
    }
}

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文件现在可以使用了，但是这些文件不能作为CSS模块在javascript中导入。

应该是模块化的CSS文件必须以文件扩展名@import结束才能使CSS模块正常工作。

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

2 个答案: