Angular-cli from css to scss

by

For Angular 6 check the Official documentation

Note: For @angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.

For existing projects

In an existing angular-cli project that was set up with the default css styles you will need to do a few things:

  1. Change the default style extension to scss

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:

ng config defaults.styleExt=scss

if you get an error: Value cannot be found. use the command:

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

(*source: Angular CLI SASS options)

  1. Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)

  2. Point the CLI to find styles.scss

Manually change the file extensions in apps[0].styles in angular.json

  1. Point the components to find your new style files

Change the styleUrls in your components to match your new file names

For future projects

As @Serginho mentioned you can set the style extension when running the ng new command

ng new your-project-name --style=scss

If you want to set the default for all projects you create in the future run the following command:

ng config --global defaults.styleExt=scss

More Related Contents:

  1. CSS for button with right triangle at lower right [closed]
  2. What’s the difference between SCSS and Sass?
  3. Import regular CSS file in SCSS file?
  4. How to style child components from parent component’s CSS file?
  5. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  6. Sass Variable in CSS calc() function
  7. Angular CLI SASS options
  8. Sass Invalid CSS Error: “expected expression”
  9. Can I use variables for selectors?
  10. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  11. Extending selectors from within media queries with Sass
  12. What does an “&” before a pseudo element in CSS mean?
  13. @import in @if statement in Sass
  14. How to overwrite angular 2 material styles?
  15. Proper SCSS Asset Structure in Rails
  16. How to set environment via `ng serve` in Angular 6
  17. The use of /deep/ and >>> in Angular 2
  18. Sass negative variable value?
  19. Rails 4: how do I use Sass Mappings?
  20. SASS – use variables across multiple files
  21. Angular 2: How to style host element of the component?
  22. Sass @each variable interpolation [duplicate]
  23. Does LESS have an “extend” feature?
  24. Creating CSS3 Circles connected by lines
  25. How to properly introduce a light/dark mode in Bootstrap?
  26. Changing border color in mat-form-field
  27. Sass and rounding down numbers. Can this be configured?
  28. SASS calculate HSL Difference between 2 colours
  29. how to watch changes in whole directory/folder containing many sass files
  30. SASS CSS: Target Parent Class from Child

Leave a Comment