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 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 project? It would be nice to have the sass file in the same folder as the component.

Answer 1

Tell angular-cli to always use scss by default

To avoid passing --style scss each time you generate a project, you might want to adjust your default configuration of angular-cli globally, with the following command:

ng set --global defaults.styleExt scss

Please note that some versions of angular-cli contain a bug with reading the above global flag (see link). If your version contains this bug, generate your project with:

ng new some_project_name --style=scss

Answer 2

The following should work in an angular CLI 6 project. I.e if you are getting:

get/set have been deprecated in favor of the config command.

npm install node-sass --save-dev

Then (making sure you change the project name)

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

To get your default project name use:

ng config defaultProject

However: If you have migrated your project from <6 up to angular 6 there is a good chance that the config wont be there. In which case you might get:

Invalid JSON character: "s" at 0:0

Therefore a manual editing of angular.json will be required.

You will want it to look something like this (taking note of the styleex property):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

Seems like an overly complex schema to me. ¯_(ツ)_/¯

You will now have to go and change all your css/less files to be scss and update any references in components etc, but you should be good to go.

Answer 3

I noticed a very anoying gotcha in moving to scss files!!! One MUST move from a simple: styleUrls: ['app.component.scss'] to styleUrls: ['./app.component.scss'] (add ./) in app.component.ts

Which ng does when you generate a new project, but seemingly 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.

Answer 4

Best could be ng new myApp --style=scss

Then Angular CLI will create any new component with scss for you...

Note that using scss not working in the browser as you probably know.. so we need something to compile it to css, for this reason we can use node-sass, install it like below:

npm install node-sass --save-dev

and you should be good to go!

If you using webpack, read on here:

Command line inside project folder where your existing package.json is: npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, search for "rules:" and add this object to the end of the rules array (don't forget to add a comma to the end of the previous object):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Then in your component:

@Component({
  styleUrls: ['./filename.scss'],
})

If you want global CSS support then on the top level component (likely app.component.ts) remove encapsulation and include the SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

from Angular starter here.

Answer 5

I tried to update my project to use the sass using this command

ng set defaults.styleExt scss

but got this

get/set have been deprecated in favor of the config command.

• Angular CLI: 6.0.7
• Node: 8.9.0
• OS: linux x64
• Angular: 6.0.3

So I deleted my project (as I was just getting started and had no code in my project) and created a new one with sass initially set

ng new my-sassy-app --style=scss

But I would appreciate if someone can share a way to update the existing project as that would be nice.

Answer 6

Like Mertcan said, the best way to use scss is to create the project with that option:

ng new My_New_Project --style=scss 

Angular-cli also adds an option to change the default css preprocessor after the project has been created by using the command:

ng set defaults.styleExt scss

For more info you can look here for their documentation:

https://github.com/angular/angular-cli