Import a external less file into an app.component.less file using Webpack
<p>Angular 2 application</p>

<p>I have a less file at <code>assets/less/color.less</code> which contains some variables.</p>

<pre><code>@submenu :  #003C4F;
@sidebar :  #00495D;
@hover :    #006673;
</code></pre>

<p>I need to be able to access these variables in my component's less file located at <code>app/app.component.less</code>. I am using "webpack" to manage my files.</p>

<p>How do you import an external <code>.less</code> file into a component's <code>.less</code> file using "webpack"? Doing a simple import <strong>doesn't</strong> seem to work, as shown below.</p>

<pre><code>//app.component.less

@import "assets/less/prm-color.less";

.grid-side {
  height: 100%;
  width: 45px;
  background-color: @sidebar;
}
</code></pre>

<p>Everything compiles fine, I just get an error for that variable in the inspector. </p>

<blockquote>
  <p>Invalid Property Value</p>
</blockquote>

<p>Here are my less-loaders:</p>

<pre><code>module: {
 loaders: [
  {
    test: /\.less$/,
    loader: 'raw',
  },
 ]
},
</code></pre>