Converting all css files to scss in angular 2

Question

I have worked on angular 2 project and used angular-cli. I would like to replace all the css files with scss. what would be the easiest way to do it? Or is there a command line that can handle it without having do it manually.

Answer 1

I just had to do this to an existing project and pieced together a bunch of information from various places, mostly from this similar stackoverflow question. Here's a set of command line actions (that worked for me on Mac OSX)

# rename all your current files
find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;

# change angular cli config file to include styles.scss instead of styles.css
sed -i -e 's/styles.css/styles.scss/g' .angular-cli.json

# now we need to go thru and fix up all the places where ts files refer to .css files
# there’s probably a better way (and will only work if you don’t have multiple css files in a component)
# this is what I did
find ./src -name "*.ts" -exec sed -i -e 's/\(.*styleUrls.*\)\.css\(.*\)/\1\.scss\2/g' {} +
rm -r *.ts-e

# fix for future generates styles
ng set defaults.styleExt scss

# Add node-sass npm module

npm install node-sass --save-dev

# or if you are using yarn, like me:

yarn add node-sass --dev

Answer 2

Step1 :- Rename all css file from css (style.css) to scss (style.scss)

Step2 :- If you are using old version (till 4) than please check .angular-cli.json file and replace css to scss in below code "defaults": { "styleExt": "scss", "component": {} }

      if you are using latest version (6) than please check angular.json 
      file and replace css to scss
      "schematics": {
       "@schematics/angular:component": {
        "styleext": "scss"
      }
      },

And restart the project

Note :- For angular (till 4) basicall we used sass-loader to convert scss to css

but for latest version (6) we used node-sass to convert scss to css so if you are getting error like (Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version) than please use below command

npm rebuild node-sass