Import a external less file into an app.component.less file using Webpack

Question

Angular 2 application

I have a less file at assets/less/color.less which contains some variables.

@submenu :  #003C4F;
@sidebar :  #00495D;
@hover :    #006673;

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

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

//app.component.less

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

.grid-side {
  height: 100%;
  width: 45px;
  background-color: @sidebar;
}

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

Invalid Property Value

Here are my less-loaders:

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

Answer 1

I was trying to do the same when I found your question. The issue for me was that I had to use a relative path instead of absolute.

So for me I had to import it the following:

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

Answer 2

The problem is the loader. It was set to raw, it should be changed to the following:

module: {
 loaders: [
  {
    test: /\.less$/,
    loader: ["css-loader", "less-loader"],
  },
 ]
},