I am encountering difficulties while attempting to transition an Angular project from using CSS to SCSS/SASS.
I followed the steps outlined in this tutorial: https://medium.com/@ngubanethabo.ambrose/migrate-from-css-to-scss-stylesheets-for-existing-angular-application-d61f8061f5b7
After executing the command:
ng config schematics.@schematics/angular:component.styleext scss
I checked my angular.json file and confirmed that the value was correctly set as:
{"schematics": {"@schematics/angular:component": {"styleext": "scss"}}}
Next, I attempted to use the renamer tool as instructed but encountered an error with the command:
sudo renamer -d --path-element ext --find css -replace scss *
The output displayed the following error message:
Singular option already set [path-element=ext]
As a workaround, I manually performed the following operations:
- Renamed the Bootstrap CSS file to SCSS (unsure if this is correct): https://i.sstatic.net/hJRPV.png
- Renamed the individual component CSS files to SCSS
However, upon running ng serve, I encountered the following error messages:
(List of errors related to module not found)
Why is this happening? What could be the issue? How can I successfully convert the project to SCSS?
EDIT-1: Here is the content of my angular.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
(more content inside angular.json...)
}