生成位置的React组件的CSS模块

Question

我们开始在 SPA 中将许多 React 组件共享为 Bit.dev 组件，但遇到了一个问题：由于 CSS 模块，无法在 Bit 的仪表板上使用我们的组件，因为 Bit 的构建过程不会创建它们。我们使用位 0.0.687。使用“bit start”启动 Bit 仪表板或“bit export”将组件发布到远程范围，然后打开远程仪表板。我们的组件使用：从'./style.css'导入样式并在CSS模块上中继，在Bit下获得未定义的“样式”。有人可以告诉一下，是否有办法改变 Bit 的构建过程来生成 CSS 模块？在我们应用程序的 Webpack 构建中，我们使用：

module: {
  rules: [
    {
      test: /\.css$/i,
      include: /src/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve('style-loader', {
            paths: [require.resolve('webpack-config-single-spa')],
          }),
        },
        {
          loader: require.resolve('css-loader', {
            paths: [require.resolve('webpack-config-single-spa')],
          }),
          options: {
            importLoaders: 1,
            sourceMap: true,
            modules: {
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true,
          },
        },
      ],
    }
  ]}

和 Webpack 5.x。

Answer 1

由于 Bit 在底层使用 CRA，因此将 CSS 文件重命名为 style.module.css 会有所帮助。 CRA 识别“module”后缀并将这些 CSS 编译为模块。