title: Import LESS files in components
body: <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>