I want to have ability to import class names from css modules in BEM naming convention like that:
import {
block,
block__element,
block__element_modifier
} from '@styles/name.module.css';
But MiniCssExtractPlugin documentation says:
Named export for CSS Modules ⚠ Names of locals are converted to camelCase.
So it basically works this way:
//styles.css
.foo-baz {
color: red;
}
.bar {
color: blue;
}
//index.js
import { fooBaz, bar } from "./styles.css";
console.log(fooBaz, bar);
So is there any workaround to preserve the underscrore (_) for those classes exported from css modules and avoid the convertion to camelCase?
Piece of my webpack config that processes css (in case you need it):
{
test: /\.css$/,
exclude: /node_modules/,
use: [
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
esModule: true,
modules: {
auto: true,
localIdentName: isDev ? '[local]___[path][name]' : '[hash:base64]',
namedExport: true,
exportGlobals: true,
},
},
},
]
},
p.s. Yes, I am aware that those imported css class variables contain hashed unique values, I just want to follow the BEM convention for better development experience.