When creating an Angular app using Angular CLI, you can choose the stylesheet format from options such as CSS (default), SCSS, SASS, LESS, and Stylus.
SASS is a preprocessor scripting language that can be interpreted or compiled into Cascading Style Sheets (CSS). It has two syntaxes: the newer syntax "SCSS" and the traditional syntax "SASS".
Using a preprocessor language like SCSS allows for more advanced and flexible styling tactics, such as variables, nesting, mixins, and inheritance. With SCSS, you can easily set up a styling hierarchy for your Angular app with global variables, mixins, and modules, and use them in any stylesheet using @import.
In this post, we will guide you through upgrading your Angular app from the default CSS styling format to SCSS in a step-by-step manner. The tutorial includes the following sections:
Basics:
1. Create a new Angular app with the default CSS stylesheet.
2. Update Angular configuration schema.
3. Rename all .css files to .scss and update components' styleUrls.
Advanced:
4. Set up the SCSS stylesheet hierarchy.
5. Utilize Bootstrap SCSS.
You can find the code for this tutorial on GitHub: angular-scss.
1. Create a new Angular app via Angular CLI
Run the following commands to create a new Angular project and generate a component:
ng new angular-scss
cd angular-scss
ng g component scss-sample
Update the app.component.html to include the newly generated component:
<app-scss-sample></app-scss-sample>
Serve the Angular app with ng serve and open localhost:4200.
2. Update Angular configuration schema
Run the command below in your root Angular app path:
ng config schematics.@schematics/angular:component.styleext scss
This command updates the angular.json file to use SCSS as the default stylesheet format:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
3. Rename .css files to .scss & Components' styleUrls
1. Delete the /node_modules/ folder to prevent any potential renaming to .css files in it.
2. Create a rename.sh script under your Angular app's root path with the following code:
#!/bin/bash
for file in $(find . -name "*$1"); do
mv "$file" "${file%$1}$2"
done
3. Run ./rename.sh .css .scss under the app's root path to rename all .css files to .scss files.
4. Replace components' styleUrls from *.component.css to *.component.scss.
5. Update the styles array in the angular.json file to point to the new styles.scss file:
"styles": [
"src/styles.scss"
]
6. Delete the rename.sh file and re-install npm packages by running npm install.
4. Setup SCSS stylesheet hierarchy
To better manage your app's styles in production mode, set up a clear stylesheet hierarchy. Create a /styles/ folder under /src/, and within it, create _variables.scss, _mixins.scss, and index.scss files.
Import the variables and mixins files in the index.scss:
@import "./variables";
@import "./mixins";
Now, you can use the declared variables and mixins by simply adding @import '../../styles/index.scss'; to your component's SCSS file.
5. Utilize Bootstrap SCSS Variables
To use Bootstrap SCSS in your Angular app, you can either import specific components using @import syntax or import the entire Bootstrap stylesheet in your styles.scss file.
For example, to use the whole Bootstrap stylesheet:
1. First, install Bootstrap by running npm install bootstrap.
2. Then, import Bootstrap in styles.scss by adding the following line:
@import "../node_modules/bootstrap/scss/bootstrap.scss";
Now, you can use some Bootstrap built-in classes like float-left, float-right, text-left, text-right, and more.
Wrapping Up
Adding a preprocessor stylesheet language, like SCSS, provides more flexibility to make your app visually appealing and manage your stylesheet variables in an easier way. Utilizing SCSS variables and mixins, along with integrating Bootstrap SCSS, can enhance the styling capabilities of your Angular app.