First of all - this loader is awesome. Thanks for putting it together! This is more of a question than an issue. I am currently using CSS modules to style React components. Many of these components will be modified versions of Bootstrap's component styles. Currently, I just add the Bootstrap class names in the component as well as an extra class from the CSS module to tweak its style. This has a couple of disadvantages:
- JSX markup is littered with verbose template strings like:
className={`col-sm-6 col-md-2 col-lg-3 ${specialStyleFromModule}`} /
...In other words, no semantic class names
- Can't access the global Bootstrap SCSS variables
I haven't been able to figure out how to use SCSS @extend on the global bootstrap styles within this context. I can imagine that there might be a really good reason NOT to couple component CSS modules with global Bootstrap styles like this...
Is there a way to tweak the loader config or some other trick I'm not thinking of to make the Bootstrap vars and classes available in the CSS modules? Is there some other way of thinking about this that I'm missing? Any help would be greatly appreciated! Here is my loader config if that helps:
{
module: {
loaders: [
{ test: /\.jsx$/, loader: 'react-hot!babel?presets[]=react,presets[]=es2015', include: path.join(__dirname, 'src') },
{ test: /\.js$/, loader: 'babel?presets[]=react,presets[]=es2015', include: path.join(__dirname, 'src') },
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' },
{ test: /\.scss?$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]!sass', include: path.join(__dirname, 'src') },
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.(woff2?|svg)$/, loader: 'url?limit=10000' },
{ test: /\.(ttf|eot)$/, loader: 'file' }
]
}
}
First of all - this loader is awesome. Thanks for putting it together! This is more of a question than an issue. I am currently using CSS modules to style React components. Many of these components will be modified versions of Bootstrap's component styles. Currently, I just add the Bootstrap class names in the component as well as an extra class from the CSS module to tweak its style. This has a couple of disadvantages:
...In other words, no semantic class names
I haven't been able to figure out how to use SCSS @extend on the global bootstrap styles within this context. I can imagine that there might be a really good reason NOT to couple component CSS modules with global Bootstrap styles like this...
Is there a way to tweak the loader config or some other trick I'm not thinking of to make the Bootstrap vars and classes available in the CSS modules? Is there some other way of thinking about this that I'm missing? Any help would be greatly appreciated! Here is my loader config if that helps: