Implementing Inline Sass Styles in Angular 12 application

Updated on: May 25, 2021

See the below article steps to implement Inline Sass in Angular 12 application, before Angular 12, only Styles mentioned in External resources .Scss files can be used to display styles, but from Angular 12, we can add the Inline Styles in styles section of @Component section, Before starting implementing InlineSass in Angular, make sure you have Angular 12 installed on your machine. You can confirm, it by running following ng command:

ng version

Step 1: Create Angular application using Angular CLI command:

ng new InlineSassExampleApp

Step 2: Now, Install Sass using NPM by running following command:

npm install -g sass

The above command will install Sass globally on your machine, you can the check the version of Sass by running following command:

sass --version

Step 3: Now, Open the application created in above step 1 in any editor and open angular.json and add the 

"inlineStyleLanguage":"scss" line at projects=>architect=>build=>configurations=>development section as shown below:

  1. "development": {
  2.    "buildOptimizer": false,
  3.    "optimization": false,
  4.    "vendorChunk": true,
  5.    "extractLicenses": false,
  6.    "sourceMap": true,
  7.    "namedChunks": true,
  8.    "inlineStyleLanguage":"scss"
  9. }

Step 4: Now, Open app.component.ts file and add the below code:

  1. import { Component } from '@angular/core';
  2. @Component({
  3.   selector: 'app-root',
  4.   templateUrl: './app.component.html',
  5.   styles: ['$font-color: blue; $font-size: 50px; div { color: $font-color; font-size: $font-size;}']
  6. })
  7. export class AppComponent {
  8.   title = 'InlineSassExampleApp';
  9. }

In the above code, we have added Inline Sass styles in the @Component declaration and we have displayed this Inline Sass style in the app.component.html file as shown below

Step 5: Now, add the below code in the app.component.html file:

<div>Welcome to InlineSass Example Application</div>

Step 6:  Now, run the Angular application using below command:

ng serve --port 65466 -o

The above command will run the Angular application on Port 65466 and it will display output as shown below:

As you can see from the above output, the text in "div" element is shown on the browser with the font-color as blue and font-size as 50px