Comenzamos a compartir varios componentes de React en nuestro SPA como componentes Bit.dev y nos encontramos con un problema: no podemos usar nuestros componentes en el panel de control de Bit debido a los módulos CSS, ya que el proceso de compilación de Bit no los crea. Usamos el bit 0.0.687. Use "inicio de bits" para iniciar el panel de Bits o "exportación de bits" para publicar los componentes en un ámbito remoto, luego abra un panel de control remoto. Nuestros componentes que usan: importar estilo desde './style.css' y retransmitir en un módulo CSS obtienen un "estilo" indefinido en Bit. ¿Puede alguien decir, por favor, si hay una manera de alterar el proceso de compilación de Bit para generar módulos CSS? En la compilación del paquete web de nuestra aplicación, usamos:
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, }, }, ], } ]}y paquete web 5.x.
Como Bit usa CRA bajo el capó, ayuda cambiar el nombre de los archivos CSS a style.module.css. CRA reconoce el sufijo "módulo" y compila estos CSS como módulos.