How would you use bootstrap styles to build css module styles

[chriskozlowski]

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' }
    ]
  }
}

[justin808]

@chriskozlowski Please see: https://github.com/shakacode/sass-resources-loader.

Example here: https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fapp%2Fbundles%2Fcomments%2Fcomponents%2FCommentScreen%2FCommentScreen.scss

Let me know if that answers your question on common components. Also, query the closed issues. If we could get a doc PR for this type of issue, that would be great.

[justin808]

BTW, for our own main project, we're going with applying the bootstrap classes on the JSX and then using CSS modules for customizations on top of that. Given how bootstrap is designed, we decided that trying to use "compose" on the bootstrap classes was a bad idea.

[justin808]

@alexfedoseev might have a quick look at this question as well. @robwise We should maybe put this in a FAQ.

[alex35mil]

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?

@chriskozlowski For vars/mixins we've made sass-resources-loader. Check out this issue for details: #9

But with classes I have the same issue. It'd be great if all bootstrap classes were available as mixins to cherry-pick them via @include in CSS Module's classes, but they aren't. And there is no way for now to use them even with @extend (which is actually for the better).

[justin808]

I added a note to the bottom of the README.md.

[chriskozlowski]

Thanks @alexfedoseev and @justin808 for the great advice. Having the ability to get the vars and mixins with sass-resources-loader definitely helps a ton.