Import LESS files in components
<p>I've got the next project structure:</p>

<pre><code>– js
    |-- index.js // the entry point
    |-- components
        |-- FooComponent.js // example component
- less
    |-- app.less // common styles for the entire app (scaffolding, variables) 
    |-- components
        |-- FooComponent.less // styles for a specific component
</code></pre>

<p>In the <strong>index.js</strong>: <code>import '../less/app.less'</code> – it works fine.</p>

<p>In the <strong>FooComponent.js</strong>: <code>import '../../less/components/FooComponent.less'</code> – it doesn't work, because <strong>FooComponent.less</strong> depends on the variables of <strong>app.less</strong>.</p>

<p>I know I can <code>@import "FooComponent.less"</code> in the <strong>app.less</strong>. But I think there's a way to import <strong>app.less</strong> in one place (<strong>index.js</strong>), and then import <strong>ComponentName.less</strong> in <strong>ComponentName.js</strong>, or not?</p>

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

<pre><code>module.exports = {
    entry: './app/js/index.js',
    ...
    module: {
        loaders: [
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: 'style!css!less'
            },
            ...
        ]
    }
};
</code></pre>

<p>Also I'd like to know how you organize your styles in React.js projects.
Thanks!</p>