4

问题

最近我在一个 React 项目中从不推荐使用的 CSS Module 切换react-css-module到babel-plugin-react-css-modules使用 CSS Module 并遇到无法解析使用@import statements(with postcss-import) 导入的 CSS 文件中的样式声明的问题。我想知道这是一个已知问题还是这些插件的配置中缺少什么？

该场景是使用通过多个​​ CSS 文件以传递方式 -ed声明tabs.jsx的类：utilities.css@import

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)

这将导致使用 webpack 在捆绑阶段出错：


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或与的兼容性postcss-import？任何有关如何解决此问题或帮助的方向都将不胜感激。谢谢。

4

0 回答 0