We started sharing a number of React components in our SPA as Bit.dev components and ran into an issue: can't use our components on Bit's dashboard due to CSS-modules as Bit's build process does not create them. We use Bit 0.0.687. Use "bit start" to launch Bit dashboard or "bit export" to publish the components to a remote scope, then open a remote dashboard. Our components which use: import style from './style.css' and relay on a CSS module get undefined "style" under Bit. May someone tell, please, if there is a way to alter Bit's build process to generate CSS modules? In our Application's Webpack build we use:
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,
},
},
],
}
]}
and Webpack 5.x.
As Bit uses CRA under the hood, renaming CSS files to style.module.css helps. CRA recognizes "module" suffix and compiles these CSS as modules.