Step by Step Guide to Upgrade Your Angular App From CSS to SCSS

Upgrade Angular from CSS to SCSS

By Neo Liu

July 26th, 2020

image

Creating an Angular app via Angular CLI allows you to select the stylesheet format among CSS (default), SCSS, SASS, LESS and Stylus.

SASS is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS) which has two syntaxes: the newer syntax “SCSS”, and the traditional syntax “SASS”

Using preprocessor language like SCSS allows users to apply complex and flexible tactics like variables, nesting, mixins, inheritance. With the magic of SCSS, you can easily setup your Angular app’s styling hierarchy with global variables, mixins and modules, and use them in any stylesheet with @import.

SCSS variables exampleSCSS variables example

In this post, I will give you a step-by-step guide to upgrade your Angular from a default CSS styling format to SCSS. The order of this tutorial is shown below:

Basics:

  1. Create a new Angular with default CSS stylesheet

  2. Update Angular configuration schema

  3. Rename all .css files to .scss & Component’s styleUrls

Advanced:

  1. Setup SCSS stylesheet hierarchy

  2. Utilize Bootstrap SCSS

You can download the code from my Github repo: angular-scss.

1. Create a new Angular app via Angular CLI

Run the commands Create a new angular project with a components

ng new angular-scss
cd angular-scss
ng g component scss-sample

Update app.component.html

<app-scss-sample></app-scss-sample>

Serve the Angular app with command ng serveand open localhost:4200

Brand new angular appBrand new angular app

2. Update Angular configuration schema

Run below command under your root Angular app path:

ng config schematics.@schematics/angular:component.styleext scss

After this command you will see these changes below in your angular.json file:

"schematics": {
   "@schematics/angular:component": {
      "styleext": "scss"
   }
}

3. Rename .css files to .scss & Components’ styleUrls

3.1 Delete /node_modules/ folder

Run rm -r -f node_modules to remove node_modules folder and all files in it. This will prevent any potential renaming to .css files in your node_modules.

3.1 Create a rename.sh under your Angular app’s root path

Run vim rename.sh and copy the renaming code below

#!/bin/bash
for file in $(find . -name "*$1");
do
  mv "$file" "${file%$1}$2"
done

Type esc and :wq to write and save this file.

Run ./rename.sh .css .scss under app’s root path to rename all .css files to .scss files.

3.3 Update Components’ styleUrls

Replace components’ styleUrls from _.component.css to _.component.scss.

In Visual Studio Code, you can use Crtl+Shift+H in Windows or Cmd+Shift+F in MacOS to globally replace .component.css to .component.scss

3.4 Update styles array in angular.json file

Open you angular.json file and change your stylesheets entry point.

Change styles array in angular.json from

"styles": [
   "src/styles.css"
]

to

"styles": [
   "src/styles.scss"
]

3.5 Delete rename.sh and re-install npm packages.

Run rm rename.sh to delete rename.sh file.

Run npm install to reinstall all npm packages.

Run ng serveand open localhost:4200

You can test if SCSS works by copying these SCSS styling code to your component style file, scss-sample.component.scss.

$font-color: #fff;
$background-color:#000;

p {
   color: $font-color;
   background-color: $background-color;
}

If you can see your app like this below, it means your Angular app has been upgraded successfully.

Brand new angular app with SCSS stylesheetBrand new angular app with SCSS stylesheet

4. Setup SCSS stylesheet hierarchy

In production mode, we will need to setup a clear stylesheet hierarchy to better manage our app’s styles. How to setup your own stylesheet hierarchy depends on your own preference. For me, I would like to create a /styles/ folder under /src, and create _variables.scss,_mixins.scss and index.scss files in it.

SCSS styles hierarchySCSS styles hierarchy

In this case, you can easily mange your global variables and mixins inside these two files, and import these two files in index.scss file. To use declared variables and mixins, just simply @import '../../styles/index.scss';in your component’s scss file.

_variable.scss

$font-color: #fff;
$background-color:#000;

_mixins.scss

@mixin hover-effect {
   &:hover, &:focus {
      border: 1px solid red;
   }
}

index.scss

@import './variables';
@import './mixins';

scss-sample.component.scss

@import '../../styles/index.scss';

p {
   color: $font-color;
   background-color: $background-color;
   @include hover-effect
}

You will see the effects like shown below:

Styling with SCSS variables and mixinsStyling with SCSS variables and mixins

5. Utilize Bootstrap SCSS Variables

To use Bootstrap scss in your Angular app, you can either import bootstrap’s scss component with ‘@import’ syntax or you can import whole bootstrap stylesheet in your styles.scss file.

For example, if you want to use whole bootstrap stylesheet:

First install bootstrap by running npm install bootstrap.

After that, import bootstrap in styles.scss by adding this line below:

@import ‘../node_modules/bootstrap/scss/bootstrap.scss’;

Now, bootstrap has been added into your Angular app, and you can use some bootstrap built-in classes like float-left, float-right, text-left, text-right and etc.

e.g. scss-sample.component.html:

<p class="text-right">scss-sample works!</p>

Browser view:

Styling with Bootstrap SCSSStyling with Bootstrap SCSS

Wrapping Up

Adding preprocessor stylesheet language gives more flexibility to make your app vivid and makes managing your stylesheet variables in an easier way. Why not give it a try?

Cheers and thanks for reading!

Other Posts:



Continue Learning