How to use LESS files

I would like to use less files in project.

UPDATE - Solution:

• install npm dependencies: npm install --save-dev less less-loader
• add less extension to resolve.extensions section:

resolve: {
    // ensure loader extensions match
    extensions: ['','.ts','.js','.json', '.less', '.css', '.html']
  },

• add a loader like: { test: /.less$/, exclude: /node_modules/, loader: 'raw-loader!less-loader' }
• and now can use like:

@Component({
  styles: [ require('./filename.less') ],
...
})

The problem:

I tried this config in webpack.config.js:

{ test: /\.less$/, loader: "raw-loader!less-loader"}

and use it as home.ts:

@Component({
  selector: 'home',
  directives: [ FORM_DIRECTIVES ],
  pipes: [],
  styles: [ require('./home.less') ],
  template: require('./home.html')
})

but when I try to npm start, I got the following error:

ERROR in ./src/app/home/home.less
Module build failed: visitors[i].run is not a function
 @ /home/ubuntu/workspace/browserclient/src/app/home/home.less (line null, column -1)
 near lines:
 @ ./src/app/home/home.ts 23:21-43

My less file is very basic (copy it from lesscss.org startpage)

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Thanks

[matthewlsawyer]

I found an issue with the raw-loader loading less styles into a component. Images, references by the less source via a url will not be resolved by webpack.

For example, the component:

@Component({
    selector: 'test',
    template: require('./template.html'),
    styles: [require('./style.less')],
    directives: [...],
    pipes: [...],
    providers: [...]
})

And in style.less:

.my-background {
    background-image: url('./my-image.png');
}

Webpack config:

{test: /\.less$/, loader: 'raw-loader!less-loader'},
{test: /\.(png|jpg|gif)$/, loader: 'file-loader'}

The raw-loader will not try to resolve this url, that seems to be the responsibility of the css-loader. As far as I’m aware the css-loader doesn’t work with angular components.

[JunkyDeLuxe]

Nobody had fixed this issue ? styleUrls: ['./login.component.less'],

and in webpack use: [‘raw-loader’, ‘css-loader’, ‘less-loader’]

Same error chrome “display Uncaught Error: Expected ‘styles’ to be an array of strings.”