Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

314
Views
Converting all css files to scss in angular 2

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.

about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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
about 4 years ago · Santiago Trujillo Report

0

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

about 4 years ago · Santiago Trujillo Report

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'

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!