Angular2 - Angular-CLI SASS options

Question!

I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI.

I need to know the best way to handle SASS in a new Angular 2 project. I tried using the ember-cli-sass repo to see if it would play along since a number of core components of the Angular-CLI are run off of Ember-CLI modules.

It didnt work but than again not sure if I just misconfigured something.

Also, what is the best way to organize styles in a new Angular 2 project? I'd be nice to have the sass file in the same folder as the component.



Answers

To make angular-cli to compile sass files with node-sassin version 1.0.0-beta.24 I had to run,

npm install node-sass --save-dev 

which installs node-sass. Then

ng set defaults.styleExt sass

to set the default styleExt to sass (or)

change styleExt to sass in angular-cli.json,

"defaults": {
     "styleExt": "sass",
}

Although it generated compiler errors.

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles 

which was fixed by changing the lines of angular-cli.json,

"styles": [
        "styles.css"
      ],

to

"styles": [
        "styles.sass"
      ],


I noticed a very anoying gotcha in moving to scss files!!! One MUST move from a simple:

styleUrls: ['app.component.scss']

to a

styleUrls: ['./app.component.scss']

which ng does when you generate a new project, but seeminly not when the default project is created. If you see resolve errors during ng build, check for this issue. It only took me ~ 1 hour.

By : JoelParke


This video can help you solving your question :)
By: admin