Angular CLI SASS options

AngularSassAngular Cli

Angular Problem Overview

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.

Angular Solutions

Solution 1 - Angular

> Angular CLI version 9 (used to create Angular 9 projects) now picks up style from schematics instead of styleext. Use the command like this:
> ng config schematics.@schematics/angular:component.style scss
and the resulting angular.json shall look like this
> > "schematics": { > "@schematics/angular:component": { > "style": "scss" > } > }

Other possible solutions & explanations:

To create a new project with angular CLI with sass support, try this:

ng new My_New_Project --style=scss

You can also use --style=sass & if you don't know the difference, read this short & easy article and if you still don't know, just go with scss & keep learning.

If you have an angular 5 project, use this command to update the config for your project.

ng set defaults.styleExt scss

For Latest Versions

For Angular 6 to set new style on existing project with CLI:

ng config schematics.@schematics/angular:component.styleext scss

Or Directly into angular.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}

Solution 2 - Angular

Update for Angular 6+

New Projects

When generating a new project with Angular CLI, specify the css pre-processor as

  • Use SCSS syntax

          ng new sassy-project --style=scss

  • Use SASS syntax

          ng new sassy-project --style=sass

Updating existing project

Set default style on an existing project by running

  • Use SCSS syntax

          ng config schematics.@schematics/angular:component.styleext scss

  • Use SASS syntax

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

    The above command will update your workspace file (angular.json) with

      "schematics": {
      "@schematics/angular:component": {
          "styleext": "scss"
      }
  }

where styleext can be either scss or sass as per the choice.

Solution 3 - Angular

Quoted from Officials github repo here -

>To use one just install for example

> npm install node-sass

>and rename .css files in your project to .scss or .sass. They will be compiled automatically. The Angular2App's options argument has sassCompiler, lessCompiler, stylusCompiler and compassCompiler options that are passed directly to their respective CSS preprocessors.

See here

Solution 4 - Angular

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

Solution 5 - Angular

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

Solution 6 - Angular

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.

Solution 7 - Angular

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.

Solution 8 - Angular

ng set --global defaults.styleExt=scss is deprecated since ng6. You will get this message:

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

You should use:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

If you want to target a specific project (replace {project} with your project's name):

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'

Solution 9 - Angular

For Angular 9.0 and above, update the "schematics":{} object in angular.json file like this:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  },

  // Angular 13 may contain this as well; NOT related
  "@schematics/angular:application": {
    ...
  }
},

Solution 10 - Angular

Angular-CLI is the recommended method and is the standard in the Angular 2+ community.

Crete a new project with SCSS

ng new My-New-Project --style=sass

Convert an existing project (CLI less than v6)

ng set defaults.styleExt scss

(must rename all .css files manually with this approach, don't forget to rename in your component files)


Convert an existing project (CLI greater than v6)

  1. rename all CSS files to SCSS and update components that reference them.
  2. add the following to the "schematics" key of angular.json (usually line 11):
      "styleext": "sass"
    }```

Solution 11 - Angular

As of 3/10/2019, Anguar dropped the support of sass. No mater what option you passed to --style when running ng new, you always get .scss files generated. It's a shame that sass support was dropped without any explanation.

Solution 12 - Angular

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.

Solution 13 - Angular

Set it as Global Default

ng set defaults.styleExt=scss --global

Solution 14 - Angular

> TL;DR
>
> Quick note: In Angular 9 & onwards, styleext is renamed to style

> Angular 9 & 9+
While creating a new project:
ng new my-proj --style=scss
> > For an existing one:
ng schematics.@schematics/angular:component.style scss > > For Angular 2 - Angular 8:
For an existing project:
ng > config schematics.@schematics/angular:component.styleext scss

Detailed answer

Angular 9 & 9+ :

Via Angular CLI
ng config schematics.@schematics/angular:component.style scss
Directly in the angular.json:
"schematics": {
   "@schematics/angular:component": {
   "style": "scss"
   }
}

For older versions

Via the Angular CLI:
ng config schematics.@schematics/angular:component.styleext scss
Directly in the angular.json:

note: lookup angular-cli.json for versions older than 6. For version 6 & 6+ the file has been renamed to angular.json

"schematics": {
   "@schematics/angular:component": {
   "styleext": "scss"
   }
 }

Note: Original SO answer can be found here

Solution 15 - Angular

CSS Preprocessor integration Angular CLI supports all major CSS preprocessors:

To use these preprocessors simply add the file to your component's styleUrls:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
}

When generating a new project you can also define which extension you want for style files:

ng new sassy-project --style=sass

Or set the default style on an existing project:

ng config schematics.@schematics/angular:component.styleext scss

note: @schematics/angular is the default schematic for the Angular CLI

Style strings added to the @Component.styles array must be written in CSS because the CLI cannot apply a pre-processor to inline styles.

Based on angular documentation https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Solution 16 - Angular

For Angular 12 update angular.json with:

"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

and:

"build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

Solution 17 - Angular

Step1. Install bulma package using npm

npm install --save bulma

Step2. Open angular.json and update following code

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

That's it.

To easily expose Bulma’s tools, add stylePreprocessorOptions to angular.json.

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
	"node_modules",
	"node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6

Solution 18 - Angular

DO NOT USE SASS OR ANGULAR's EMBEDDED CSS SYSTEM!!

I cannot stress this enough. The people at Angular did not understand basic cascading style sheet systems as when you use both these technologies - as with this angular.json setting - the compiler stuffs all your CSS into Javascript modules then spits them out into the head of your HTML pages as embedded CSS that breaks and confuses cascade orders and disables native CSS import cascades.

For that reason, I recommend you REMOVE ALL STYLE REFERENCES FROM "ANGULAR.JSON", then add them back into your "index.html" manually as links like this:

<link href="styles/styles.css" rel="stylesheet" />

You now have a fully functioning, cascading CSS system that's fully cached in your browser over many refreshes without ECMAScripted circus tricks, saving huge amounts of bandwidth, increasing CSS overall management in static files, and full control over your cascade order minus the clunky embedded CSS injected into the head of all your web pages which Angular tries to do.

SASS isn't even necessary when you understand how to manage cascades in basic CSS files. Large sites with complex CSS can be very simple to manage for those that bother to learn cascade orders using a handful of linked CSS files.

Categories
Recommended Angular Solutions
Recommended Sass Solutions
Recommended Angular Cli Solutions

Previous Solution:

How to add footnotes to GitHub-flavoured Markdown?

MarkdownGithub Flavored-MarkdownMultimarkdown

Next Solution:

How do I express a date type in TypeScript?

DateTypescript

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJDillon522View Question on Stackoverflow
Solution 1 - AngularMertcan DikenView Answer on Stackoverflow
Solution 2 - AngularAll Іѕ VаиітyView Answer on Stackoverflow
Solution 3 - AngularregnarView Answer on Stackoverflow
Solution 4 - AngularMichael P. BazosView Answer on Stackoverflow
Solution 5 - AngularJared WadsworthView Answer on Stackoverflow
Solution 6 - AngularJoelParkeView Answer on Stackoverflow
Solution 7 - AngularAlirezaView Answer on Stackoverflow
Solution 8 - AngularaloisdgView Answer on Stackoverflow
Solution 9 - AngularMahozadView Answer on Stackoverflow
Solution 10 - AngularEdodso2View Answer on Stackoverflow
Solution 11 - AngularJust a learnerView Answer on Stackoverflow
Solution 12 - AngularNeil WatsonView Answer on Stackoverflow
Solution 13 - AngularSajith MantharathView Answer on Stackoverflow
Solution 14 - AngularJunaidView Answer on Stackoverflow
Solution 15 - AngularVictor Hugo Arango A.View Answer on Stackoverflow
Solution 16 - AngularcarrauaView Answer on Stackoverflow
Solution 17 - AngularBALAView Answer on Stackoverflow
Solution 18 - AngularStokelyView Answer on Stackoverflow