Load common.sass style on top of a Reacts components - sass

Question

I'm building a react application with SASS for the styles and serving it with webpack-dev-server, a couple of components and some extract of the structure look like that:
├── App.js
├── components
│   ├── Layout.jsx
│   ├── Layout.scss
│   ├── header
│   ├── pages
│   └── footer
└── css
   ├── _vendors.scss
   ├── _variables.scss
   ├── _mixins.scss
   └── utils.scss
Inside main.scss, I have all the #imports, also inside the vendors I have the imports in node_modules dependencies, etc...
Per each component in react have his own scss file.
But, I want the main.scss loaded in the Layout.jsx and use the mixins or imports or placeholder classes inside the scss file per component.
I was trying playing with css-loader and style-loader with includePath's and nothing successful.
It's this possible? It's related on the -loaders of webpack?
ps: Isn't viable have an .html file, this is a library of components.

Answer 1

A good way I found to keep track of styles for various react components is to have a style file for each corresponding component. So Header.react.jsx would have a corresponding Header.sass. Then you just include the style file on top of the react component, like so (using the ES6 syntax):
import './Header.sass';
For this to work with webpack, you need the appropriate loaders:
loaders: [
{
test: /\.sass/,
loader: 'style!css!autoprefixer!sass'
}
]
This is nice for development, because the styles are loaded in javascript and get updated automatically on any change if you're using the hot loader, but in production, you'd want to separate out the css file with all the styles. You can do this with a separate webpack config file for production, which can look something like this:
plugins: [
new ExtractTextPlugin('bundle.css', { allChunks: false })
],
loaders: [
{
test: /\.scss/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css!autoprefixer!sass'
)
}
]
When doing things this way, it's good to include a sass config file and a mixin file, for the variables or mixins you use globally (with the regular sass #import). It's important not to define any actual styles in the files you import, since the styles would be included into all files you include it in, resulting in loads of duplication.
This is good for component libraries (as you put it), since webpack will only include the react components you use in your application, and in turn, it will only pull in the sass files you use.
I found this approach very handy, and used it in a smaller application here. Take a look if I haven't explained it well enough.