How do you create software to make use of SCSS ?

Angular is a well-liked JavaScript framework for constructing net purposes. It offers a set of instruments and libraries for constructing client-side purposes utilizing fashionable net applied sciences.

Sass (Syntactically Superior Model Sheets) is a CSS preprocessor that provides highly effective options to CSS, equivalent to variables, mixins, and capabilities. Sass types are written in a particular syntax referred to as SCSS (Sass CSS), which is a superset of CSS. SCSS recordsdata have the .scss extension and are compiled into common CSS recordsdata that can be utilized in net purposes.

On this article, we’ll undergo a step-by-step course of explaining the right way to create an Angular software and use Sass for styling. We are going to begin by creating a brand new Angular venture and putting in Sass. Then, we’ll configure Angular to make use of Sass and create a Sass file. Lastly, we’ll import the Sass file into an Angular part and run the applying to check the Sass types. Earlier than getting began, be sure you have the next stipulations:

• Node.js and npm are put in in your native machine. You possibly can obtain the newest model of Node.js from the official web site.
• Angular CLI (Command Line Interface) is put in globally in your native machine. You possibly can set up Angular CLI by operating the next command in your terminal:

npm set up -g @angular/cli

We are going to create an software to make use of scss by implementing them with 2 totally different strategies. 

Technique 1: Set up and use SCSS, after initializing the Angular venture.

Step 1: Create a brand new Angular venture

To create a brand new Angular venture, open your terminal and navigate to the listing the place you wish to create your venture. Then, run the next Angular CLI command:

ng new my-project

Change my-project with the identify of your venture. This command will create a brand new listing with the identify of your venture and generate all the mandatory recordsdata and folders for an Angular venture inside it.

Step 2: Set up Sass

To make use of Sass in your Angular venture, you should set up the node-sass package deal. Navigate to your venture listing and run the next command:

npm set up sass

This can set up the node-sass package deal as a improvement dependency in your venture.

Step 3: Configure Angular to make use of Sass

To configure Angular to make use of Sass, you should modify the angular.json file within the root of your venture. Open the file and discover the tasks > [project-name] > architect > construct > choices part. Then, add the next property:

"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
}

This can inform Angular to search for Sass recordsdata within the src/types listing.

Step 4: Create a Sass file

Now, that you’ve got configured Angular to make use of Sass, you’ll be able to create a Sass file in your venture. Create a brand new file with the .scss extension within the src/types listing (or every other listing that you just specified within the stylePreprocessorOptions property within the angular.json file). For instance, you’ll be able to create a file referred to as types.scss.

Step 5: Import the Sass file into your Angular part

To make use of the Sass file in your Angular part, you should import it within the part’s styleUrls property. For instance, when you’ve got a part referred to as MyComponent, you’ll be able to import the Sass file like this:

import { Element } from '@angular/core';
@Element({
   selector: 'app-my-component',
   templateUrl: './my-component.part.html',
   styleUrls: ['./styles.scss']
})
export class MyComponent {
   // part code goes right here
}

Step 6: Run the Angular software

To run the Angular software, navigate to the venture listing in your terminal and run the next command:

ng serve --open

This can begin the event server and serve your Angular software. Now you can view the applying in your browser.

Instance: This instance describes the creation of an Angular software to implement the scss.

Output:

 

Technique 2: Use or configure SCSS in your Angular venture on the time of initialization with the type flag set to make use of SCSS.

Step 1: Make an Angular Undertaking with the CLI with the type flag.

The beneath command will create a brand new venture with the identify “project-name” and allow SCSS because the default styling language.

ng new project-name --style=scss

Now, you’ll be able to create a brand new part and it’ll have a .scss file with the identical identify because the part. For instance, we’ve made the beneath venture with a mode flag set to scss.

 

Undertaking Construction: The beneath venture will seem after profitable set up:

 

Instance: That is one other instance that implements the SCSS with an Angular software.

Output: