compiling less file using angular2 cli

Question

I've following settings inside angular-cli-build

Angular2App(defaults,{
 lessCompiler: {
     includePaths: [
       'src/app'
      ],
   }
})

I'have two test less files in src directory.

test1.less

//some code

test2.less

@import "test1.less";

when I ng build the project it throws an error

Build failed.
File: input (1)
The Broccoli Plugin: [LESSPlugin] failed with:
undefined

I've tried issue 873 temporary solution. The error gone.but could not find any compiled css files. please help. how you compile customized bootstrap less files in angular2 project which is built by angular-cli.

how could I extend the bootstrap's less file's(stayed inside node_modules) with my custom lesses

Answer 1

open angular-cli.json and insert a new entry into the styles array

"styles": [
    "styles.css",
    "less/app.less"
  ],

Install less if needed. I don't know if this is required. But I had done this beforehand.

npm install less --save

Answer 2

If you install less with npm install less --save and rename the CSS file in your component's directory, it should work. Works the same for sass, as described in angular-cli documentation/Readme file.

I made the import work by placing the other.less file in /shared directory and importing it with the full path ./src/app/shared/other.less

@import (less) "./src/app/shared/other.less";

it works without an error now.

Edit: it seams to work with @import (less) "./src/app/other.less";as well.

Answer 3

When creating a new project :

ng new project_name --style less

Then when you take a look at your project, you'll find a less file in every component folder rather than css one in the one hand. And in the other hand, when you look at the component.ts file of a component, you 'll find in @Component, styleUrls: ['./xxx.component**.less**'] rather than ['./xxx.component**.css**']

For post install do like @Kaspars said:

npm install less --save

When done :

• rename all CSS files in your component's directory to less

• change ['./xxx.component.css'] by ['./xxx.component.less'] in every component file

If you want scss rather than less, do the some thing