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

User · Answer

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.

User · Answer

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 scssand the resulting angular json shall look like this  quot schematics quot         quot  schematics angular component quot            quot style quot    quot scss quot              Other possible solutions  amp  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  amp  if you don t know the difference  read this short  amp  easy article and if you still don t know  just go with scss  amp  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   quot schematics quot            quot  schematics angular component quot            quot styleext quot    quot scss quot

User · Answer

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

User · Answer

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    rename all CSS files to SCSS and update components that reference them  add the following to the  schematics  key of angular json  usually line 11       schematics angular component            styleext    sass

User · Answer

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  quot ANGULAR JSON quot   then add them back into your  quot index html quot  manually as links like this   lt link href  quot styles styles css quot  rel  quot stylesheet quot    gt   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

For Angular 9 0 and above  update the  schematics     object in angular json file like this    schematics         schematics angular component          style    scss

User · Answer

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

User · Answer

Set it as Global Default  ng set defaults styleExt scss --global

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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        Original Answer  for Angular  lt  6   New projects  For new projects we can set the options --style sass or --style scss according to the desired flavor SASS SCSS   Use SASS syntax  ng new project --style sass   Use SCSS syntax  ng new project --style scss     then install node-sass   npm install node-sass --save-dev     Updating existing projects  To make angular-cli to compile sass files with node-sass  I had to run   npm install node-sass --save-dev    which installs node-sass  Then   for SASS syntax  ng set defaults styleExt sass  for SCSS syntax  ng set defaults styleExt scss    to set the default styleExt to sass    or   change styleExt to sass or scss for desired syntax in  angular-cli json     for SASS syntax   defaults           styleExt    sass      for SCSS syntax   defaults           styleExt    scss         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 either    for SASS syntax    styles              styles sass            for SCSS syntax    styles              styles scss

User · Answer

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   https   github com angular angular-cli wiki stories-css-preprocessors

[angular] Angular CLI SASS options

Examples related to angular

Examples related to sass

Examples related to angular-cli