Webpack and sass-loader files import order
<p>I am doing a little bit of investigation about React and started to experiment with sass-loader for CSS/SCSS module handling. I've already most of the setup complete, but I got a problem that I'm not really sure how to tackle, and I present it in the following scenario:</p>

<p><strong>ComponentA.jsx</strong></p>

<pre class="lang-js prettyprint-override"><code>import React from 'react';
import ComponentB from './app/components/ComponentB.jsx';

// Importing Core CSS module for component A
require("./ComponentA.scss");

export default class ComponentA extends React.Component{

  constructor(){
    ...
  }

  render(){
    return (
      &lt;div&gt;
          &lt;ComponentB /&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p><strong>ComponentB.jsx</strong></p>

<pre class="lang-js prettyprint-override"><code>import React from 'react';

// Importing CSS module for component B with some overriding content for component A
require("./ComponentB.scss");

export default class ComponentB extends React.Component{

  constructor(){
      ...
  }

  render(){
    return (
      ...
    );
  }
}
</code></pre>

<p><strong>webpack.config.js</strong></p>

<pre class="lang-js prettyprint-override"><code>var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "../build")
  },
  entry: path.join(__dirname,"../app/ComponentA.jsx"),
  module:{
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel', 
        query: {
          presets: ['react', 'es2015']
        }
      },
      { 
        test: /\.(scss|css)$/, 
        loader: ExtractTextPlugin.extract(['css','sass'])
      },
      ...
    ]
  },
  output: {
    path: path.join(__dirname, "..", "build"),
    filename: "bundle.js",
    publicPath: "/"
  },
  plugins: [
    new ExtractTextPlugin(
      "style.css", 
      { allChunks: true }
    )
  ]
};
</code></pre>

<p>From this setup, Webpack worked as expected and created the new file <em>style.css</em> (virtually of course as I'm on development), BUT... the SCSS content files were not rendered in the order that I thought it would be.</p>

<p>The resulting <em>style.css</em> content was arranged as:</p>

<ul>
<li>ComponentB.scss content</li>
<li>ComponentA.scss content</li>
</ul>

<p>Instead of:</p>

<ul>
<li>ComponentA.scss content</li>
<li>ComponentB.scss content</li>
</ul>

<p>As I meant it to be on the hierarchy. This is a problem in the matter that as for overriding <em>Component A</em> base CSS I would need webpack and sass-loader to merge files in the hierarchy order. </p>

<p>So, after this the question would be: </p>

<p><strong>How can I configure sass-loader to load the modules as it passes over the tree?</strong></p>

<p>or even simpler...</p>

<p><strong>Is there a better way to do this?</strong></p>