Seeing a few debates and helping a few people with this subject, I thought I would put my 2 cents onto digital paper.
So to me, the problem starts because you want the speed and robustness that bootstrap offers, but you would also like to include your own styles using CSS modules because using includes from component.css files feels dirty and is un-typed, and although BEM is great, you think CSS modules is a more elegant way of doing things inside react
Include and Exclude Method
The first way is to leaverage the include / exclude funcationality of webpack rules
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
{ test: /\.scss$/, include: [/\.global/, /bootstrap/], loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { modules: false } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ] }) }, { test: /\.scss$/, exclude: [/\.global/, /bootstrap/, /node_modules/], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]--[hash:base64:5]', } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ] }) } |
The highlighted rows shows the pair of logic that allows us to do this.
Resource Query Method
Another way to solve this issue is to use the resourceQuery: functionality of webpack
instead of using the pair of include, exclude we can place a resourceQuery to qualify the bootstrap css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
{ test: /\.scss$/, resourceQuery: /^\?raw$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { modules: false } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ] }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]--[hash:base64:5]', } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ] }) } |
and then you would use it as such on css imports
|
1 |
import 'bootstrap/dist/css/bootstrap.min.css?raw'; |
Leave a Reply