Jamie Jamie - 1 year ago 321
Sass (Sass) Question

Angular-cli from css to scss

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'(…)


How do I fix this?

Answer Source

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 or run:

ng set defaults.styleExt=scss
  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-cli.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 set defaults.styleExt=scss --global
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download