How to use css-modules and bootstrap at same time? - html

Question

I'm using electron-react-boilerplate for my project and this boilerplate is using css-modules for styling purpose.
I'm having trouble with using bootstrap and custom style at the same place.
Suppose i've a code snippet like,
<div className="container">
<div className="row custom-css">
// other codes...
</div>
in that case 'row' is one bootstrap className and 'custom-css' is my own style className.
please help me to find some solution for these problem so that i can use css-modules and bootstrap together...

Answer 1

You need to import your CSS module styles from a module file specific to this component, then interpolate them into the classname via the returned object...
MyComponent.css
.myCustomClassName {
color: #fff;
}
MyComponent.js
import styles from './MyComponent.css';
<div className={`row ${styles.myCustomClassName}`} />
When output as HTML this would become something like...
<div class="row MyComponent__myCustomClassName___n1cC4ge}` />
So as long as you are loading the bootstrap CSS somewhere that should pick up on both

Answer 2

thanks guys i find it working by adding {} around that
<div className={`row ${styles.myCustomClassName}`} />

Answer 3

I was kinda stuck with this (as to how to load Bootstrap).
I created this rough edit in my webpack config file.
{
test: /(\.bootstrap\.css$|bootstrap-theme.css|bootstrap.css)/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
minimize: true || {/* CSSNano Options */}
}
},
],
},
{
test: /^((?!\.bootstrap|bootstrap-theme).)*\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
}
]
},
The rest are covered perfectly by alechill