react-toolbox: Load style without breaking current global css/scss

I’m trying to get react-toolbox running in our new project of ours. The problem I’m facing is that my required scss files will act as global and not “namespaced” for each component.

When I’m trying to make the style load for react-toolbox, I get it to work but in the progress I’m breaking our current scss. And of course when I revert my loaders to the original state, the style breaks for my react-toolbox element (Dropdown).

Global scss working, react-toolbox style broken

test    :  /(\.scss|\.css)$/,
loaders : [
  'style-loader',
  'css-loader',
  'sass-loader?includePaths[]=' + paths.src('styles')
]

Global scss broken, react-toolbox style working

test    :  /(\.scss|\.css)$/,
loaders: [
  require.resolve('style-loader'),
  require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
  require.resolve('sass-loader') + '?sourceMap'
]

Is there a way of loading the style for each component and keep my own required scss global?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 26 (9 by maintainers)

Most upvoted comments

You have to import a commons.scss stylesheet that includes a reset and some base settings that are used in react-toolbox 😃

javivelasco on Jul 17, 2016

Yeah, it’s missing. We should add it 😕

javivelasco on Jul 18, 2016

@javivelasco i think this is the same issue i am facing but the issue is actually more that all existing styling in an app is broken unless it conforms to CSS modules. I believe there should be a way to limit the loaders to just react-toolbox but I am not sure how - any ideas?

Consider an app that is currently using bootstrap (or equiv.) with a simple import 'styles/index.scss'; in its index.js. So, within components, they just assume styles like container and row to exist (e.g. <div className="container" />). When you pull in react-toolbox (and change webpack to work with react-toolbox) it breaks all default styling - as .container no longer exists (instead has to be renamed to .index__container___xxxxx) so that react-toolbox can find its styles.

This seems like a pretty intrusive approach - basically, to use react-toolbox, you have to also take on the modular approach to CSS. Whilst this approach does look like an awesome solution to styling react projects, its often unrealistic to rewrite an entire app if it would like to utilize react-toolbox.

Any ideas on how it could work without having to rewrite everything?

mattgi on Dec 5, 2015