Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

compiling less file using angular2 cli

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

like image 242
Borhan Avatar asked Jun 22 '16 19:06

Borhan


3 Answers

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

like image 189
Salim Hamidi Avatar answered Oct 14 '22 20:10

Salim Hamidi


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
like image 14
Shardul Avatar answered Oct 31 '22 13:10

Shardul


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.

like image 4
KB_ Avatar answered Oct 31 '22 12:10

KB_