Inetone: Angular CSS

(12.04.2020)

When creating a new project you can choose stylesheet format

 Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ http://stylus-lang.com                                         ]

CSS Tutorial with Angular 9/8

:
Sass, SCSS, Less, and Stylus are called CSS preprocessors. A CSS preprocessor is a program that lets you generate CSS from the preprocessor's unique syntax. There are many CSS preprocessors to choose from, however, most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on.
Browsers can only understand CSS so these other formats are precompiled by the CLI using an appropriate preprocessor at the build time.

Your style format and file is specified in angular.json.
Note: Since V9 "styleExt" seems to be replaced with "style".

  "projects": {
    "Fiori02": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"  <==
        }
      },
[...]
          "styles": [ "src/styles.scss" ],

Generate or change with dedicated format#

css with less (less) or sass (sass,scss)

> ng new Test004 --style=sass
> ng set defaults.styleExt scss