Angular-cli from css to scss

Question

I ve read the documentation  which says that if I want to use scss I have to run the following command   ng set defaults styleExt scss   But when I do that and make that file  I still receive this error in my console    styles bundle js 33Uncaught Error  Module build failed  Error  ENOENT  no such file or directory  open   Users Egen Code angular src styles css

User · Answer

Open angular json file  1 change from   schematics       to   schematics                  schematics angular component                         styleext    scss                                 change from  at two places     src styles css   to   src styles scss   then check and rename all  css files and update component ts files styleUrls from  css to  scss

User · Answer

Use command   ng config schematics  schematics angular component styleext scss

User · Answer

As of ng6 this can be accomplished with the following code added to angular json at the root level   Manually change in  angular json    schematics         schematics angular component          styleext    scss

User · Answer

For existing projects   In angular json file   In build part and in test part  replace    styles     src styles css    by  styles     src styles scss    Replace    schematics       by  schematics       schematics angular component      style    scss            Using ng config schematics  schematics angular component styleext   scss command works but it does not place the configuration in the   same place    In your project rename your  css files to  scss  For a new project  this command do all the work   ng n project-name --style scss   For global configuration  New versions seems to not have a global command

User · Answer

A quick and easy way to perform the migration is to use the schematic NPM package schematics-scss-migrate  this package rename all css to scss file   ng add schematics-scss-migrate https   github com Teebo scss-migrate readme

User · Answer

CSS Preprocessor integration for Angular CLI  6 0 3  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   Angular CLI Documentation for all major CSS preprocessors

User · Answer

A brute force change can be applied  This will work to change  but it s a longer process   Go to the app folder src app   Open this file  app component ts  Change this code styleUrls      app component css   to styleUrls      app component scss   Save and close    In the same folder src app   Rename the extension for the app component css file to  app component scss  Follow this change for all the other components   ex  home  about  contact  etc       The angular json configuration file is next  It s located at the project root    Search and Replace the css change it to  scss   Save and close    Lastly  Restart your ng serve -o    If the compiler complains at you  go over the steps again    Make sure to follow the steps in app src closely

User · Answer

In latest version of Angular  v9   below code needs to add in angular json     schematics           schematics angular component            style    scss              Could be added using the following command   ng config schematics  schematics angular component style scss

User · Answer

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    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    Rename your existing  css files to  scss  i e  styles css and app app component css  Point the CLI to find styles scss      Manually change the file extensions in apps 0  styles in angular json    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

User · Answer

In ng6 you need to use this command  according to a similar post   ng config schematics  schematics angular component    styleext   scss

User · Answer

For Angular 6   ng config schematics  schematics angular component styleext scss   note   schematics angular is the default schematic for the Angular CLI

User · Answer

For users of the Nrwl extensions who come across this thread  all commands are intercepted by Nx  e g   ng generate component myCompent  and then passed down to the AngularCLI   The command to get SCSS working in an Nx workspace   ng config schematics  nrwl schematics component styleext scss

[css] Angular-cli from css to scss

Examples related to css

Examples related to angular

Examples related to sass

Examples related to angular6

Examples related to angular-cli