最近，我已从不赞成使用的react-css-module切换为babel-plugin-react-css-modules，以便在React项目中使用CSS模块，并遇到无法解决{导入的CSS文件中的样式声明的问题。 {1}}（带有@import statements）。 我想知道这是已知问题还是这些插件的配置中缺少了什么？
该场景是postcss-import使用tabs.jsx中声明的类，该类是utilities.css的类，以可传递的方式遍历多个CSS文件：
@import这将导致在webpack捆绑阶段出现错误：
src/components/tabs/
|
| tabs.css (@import 'base.css';)
| tabs.jsx (import './tabs.css'; and uses class 'hidden')
src/style/
|
|--> base.css (@import 'utilities.css';
|--> utilities.css (where .hidden class is declared)
在
ERROR in ./components/tabs/tabs.jsx
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: Could not resolve the styleName 'hidden'.
at handleError (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/getClassName.js:18:11)
at styleNameValue.split.filter.map.styleName (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/getClassName.js:103:14)
at Array.map (<anonymous>)
at _default (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/getClassName.js:83:6)
at _default (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/resolveStringLiteral.js:20:55)
at PluginPass.JSXElement (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/index.js:191:47)
at newFn (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:90:19)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:146:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitMultiple (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:85:17)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitMultiple (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:85:17)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:90:19)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:146:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitMultiple (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:85:17)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
@ ./components/tabs/index.js 5:0-45 5:0-45
@ ./index.js
中添加一些调试语句表明getClassName.js中的类声明永远不可用，因此将错误抛出上面。
这里是依赖项：
@import "devDependencies": {
"css-loader": "3.0.0",
"postcss": "7.0.17",
"postcss-import": "12.0.1",
"postcss-inline-svg": "4.0.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.6.0",
...
}
"dependencies": {
"@babel/runtime": "7.4.5",
"babel-plugin-react-css-modules": "5.2.6",
...
}
中的设置：
postss.config.js module.exports = {
plugins: [
require('postcss-inline-svg'),
require('postcss-import')({
path: ['src/styles'],
}),
]
};
中的设置：
webpack.config.js在...
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
},
sourceMap: true,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
},
],
},
...
中：
.babelrc过去，当我使用...
{
"plugins": ["@babel/plugin-proposal-object-rest-spread", "lodash",
["react-css-modules", {
"exclude": "node_modules",
"generateScopedName": "[name]__[local]--[hash:base64:5]",
"autoResolveMultipleImports": true
}
]
],
}
...
时，从来没有问题。因此，它可能是特定于较新的react-css-module还是与babel-plugin-react-css-modules的兼容性？ 对于解决该问题或提供帮助的任何方向，我们将不胜感激。谢谢。