7

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
fatah
  • 573
  • 3
  • 9
  • 16

3 Answers3

18

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
Ultrasaurus
  • 3,031
  • 2
  • 33
  • 52
  • 3
    If you were sloppy when you ran the first command, and did it at the root of your project, you might have renamed some of your npm dependencies' files. If so, delete those dependencies and do `npm i` to reinstall... – jmq Feb 22 '18 at 14:59
4

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

Prashant Shrivastava
  • 189
  • 2
  • 9
0

Yeah now I have to do this and add a step for sass-convert because angular decided to merge this in

https://github.com/angular/angular-cli/pull/13444

-.-

Thank you very much 'Alex Eagle'

DGmip
  • 193
  • 2
  • 9