为Bit中的React组件生成CSS模块

Question

我们开始在SPA中共享许多React组件作为Bit.dev组件，但遇到了一个问题：由于CSS模块，无法在Bit的面板上使用我们的组件，因为Bit的构建过程不会创建这些组件。我们使用位0.0.687。使用"；位起始"；以启动Bit仪表板或"；比特导出"；要将组件发布到远程作用域，请打开远程面板。我们的组件使用：从'导入样式/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,
},
},
],
}
]}

和Webpack5.x.

Answer 1

由于Bit在后台使用CRA，将CSS文件重命名为style.module.CSS有帮助。CRA承认"；模块"；后缀，并将这些CSS编译为模块。