Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How would you use bootstrap styles to build css module styles #12

Closed
chriskozlowski opened this issue Jan 4, 2016 · 6 comments
Closed
Labels

Comments

@chriskozlowski
Copy link

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
Copy link
Member

@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
Copy link
Member

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
Copy link
Member

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

@alex35mil
Copy link
Member

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
Copy link
Member

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

@chriskozlowski
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants