Skip to content

Instantly share code, notes, and snippets.

@spasma

spasma/angular-css-to-scss.sh

Last active July 2, 2024 01:54
Show Gist options
  • Save spasma/55125865bd42a0db6f254c2c57a2ae4f to your computer and use it in GitHub Desktop.
Save spasma/55125865bd42a0db6f254c2c57a2ae4f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. spasma revised this gist Dec 17, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion angular-css-to-scss.sh
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;
    cd ..

    # change angular cli config in angular.json
    sed -i -e 's/styles.css/styles.scss/g' .angular.json
    sed -i -e 's/styles.css/styles.scss/g' angular.json

    # Change all ts-files (change .css to .scss) in @Module styleUrls
    find ./src -name "*.ts" -exec sed -i -e 's/\(.*styleUrls.*\)\.css\(.*\)/\1\.scss\2/g' {} +
  2. spasma created this gist Dec 17, 2019.
    23 changes: 23 additions & 0 deletions angular-css-to-scss.sh
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    #### Please Backup your project first!!!!!!!!
    # run this in your project root folder
    # rename all your src files
    cd src
    find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;
    cd ..

    # change angular cli config in angular.json
    sed -i -e 's/styles.css/styles.scss/g' .angular.json

    # Change all ts-files (change .css to .scss) in @Module styleUrls
    find ./src -name "*.ts" -exec sed -i -e 's/\(.*styleUrls.*\)\.css\(.*\)/\1\.scss\2/g' {} +
    find ./src -name "*.ts-e" -exec bash -c 'rm "$1"' - '{}' \;

    # Angular <6.1 (running on 8 doesn't break anything)
    ng set defaults.styleExt scss
    # Angular 6+ version of the above one
    ng config schematics.@schematics/angular:component.styleext scss

    # Add node-sass npm module
    npm install node-sass --save-dev

    # Everything should work now!