Create Angular Application with SCSS
Last Updated :
24 May, 2024
Angular is a popular JavaScript framework for building web applications. It provides a set of tools and libraries for building client-side applications using modern web technologies.
Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that adds powerful features to CSS, such as variables, mixins, and functions. Sass styles are written in a special syntax called SCSS (Sass CSS), which is a superset of CSS. SCSS files have the .scss extension and are compiled into regular CSS files that can be used in web applications.
In this article, we will go through a step-by-step process explaining how to create an Angular application and use Sass for styling. We will start by creating a new Angular project and installing Sass. Then, we will configure Angular to use Sass and create a Sass file. Finally, we will import the Sass file into an Angular component and run the application to test the Sass styles. Before getting started, make sure you have the following prerequisites:
- Node.js and npm are installed on your local machine. You can download the latest version of Node.js from the official website.
- Angular CLI (Command Line Interface) is installed globally on your local machine. You can install Angular CLI by running the following command in your terminal:
npm install -g @angular/cli
We will create an application to use scss by implementing them with 2 different methods.Â
Method 1: Install and use SCSS, after initializing the Angular project.
Step 1: Create a new Angular project
To create a new Angular project, open your terminal and navigate to the directory where you want to create your project. Then, run the following Angular CLI command:
ng new my-project
Replace my-project with the name of your project. This command will create a new directory with the name of your project and generate all the necessary files and folders for an Angular project inside it.
Step 2: Install Sass
To use Sass in your Angular project, you need to install the node-sass package. Navigate to your project directory and run the following command:
npm install sass
This will install the node-sass package as a development dependency in your project.
Step 3: Configure Angular to use Sass
To configure Angular to use Sass, you need to modify the angular.json file in the root of your project. Open the file and find the projects > [project-name] > architect > build > options section. Then, add the following property:
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
}
This will tell Angular to look for Sass files in the src/styles directory.
Step 4: Create a Sass file
Now, that you have configured Angular to use Sass, you can create a Sass file in your project. Create a new file with the .scss extension in the src/styles directory (or any other directory that you specified in the stylePreprocessorOptions property in the angular.json file). For example, you can create a file called styles.scss.
Step 5: Import the Sass file into your Angular component
To use the Sass file in your Angular component, you need to import it in the component's styleUrls property. For example, if you have a component called MyComponent, you can import the Sass file like this:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./styles.scss']
})
export class MyComponent {
// component code goes here
}
Step 6: Run the Angular application
To run the Angular application, navigate to the project directory in your terminal and run the following command:
ng serve --open
This will start the development server and serve your Angular application. You can now view the application in your browser.
Example: This example describes the creation of an Angular application to implement the scss.
HTML
<div class="center">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How do you create an angular application to use scss?
</h3>
<h4>
Method 1: Install and use SCSS, after initializing
the Angular project.
</h4>
</div>
<button (click)="toggleList()">
Show Steps
</button>
<div *ngIf="showList">
<ul>
<li>
Create a new Angular project
</li>
<li>
Install Sass
</li>
<li>
Configure Angular to use Sass
</li>
<li>
Import the Sass file in your Angular component
</li>
<li>
Run the Angular application
</li>
</ul>
</div>
CSS
$main-background-color: green;
$main-text-color: white;
$main-font-size: 16px;
$main-border-radius: 4px;
@mixin button-style {
padding: 8px 16px;
background-color: $main-background-color;
color: $main-text-color;
border: none;
border-radius: $main-border-radius;
font-size: $main-font-size;
cursor: pointer;
}
body {
margin: 0;
padding: 0;
}
button {
@include button-style;
}
ul {
list-style: inside;
padding: 5;
margin: 10;
}
li {
padding: 5px;
font-size: $main-font-size;
color: gray;
}
JavaScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'scss-app';
showList: boolean = false;
toggleList() {
this.showList = !this.showList;
}
}
Output:

Method 2: Use or configure SCSS in your Angular project at the time of initialization with the style flag set to use SCSS.
Step 1: Make an Angular Project with the CLI with the style flag.
The below command will create a new project with the name "project-name" and enable SCSS as the default styling language.
ng new project-name --style=scss
Now, you can create a new component and it will have a .scss file with the same name as the component. For example, we have made the below project with a style flag set to scss.

Project Structure: The below project will appear after successful installation:

Example: This is another example that implements the SCSS with an Angular application.
HTML
<div class="center">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>
How do you create an angular application to use scss?
</h3>
<h4>
Method 2: Use or configure SCSS in your
Angular project at the time of initialization
with the style flag set to use SCSS.
</h4>
</div>
<button (click)="openModal()">
Show Steps
</button>
<div class="modal"
*ngIf="showModal">
<div class="modal-content">
<span (click)="closeModal()">
×
</span>
<ul>
<li>
Create a new Angular project
</li>
<li>
Install Sass
</li>
<li>
Configure Angular to use Sass
</li>
<li>
Import the Sass file in your Angular component
</li>
<li>
Run the Angular application
</li>
</ul>
</div>
</div>
CSS
$button-bg-color: blue;
$button-text-color: white;
$modal-bg-color: rgba(0, 0, 0, 0.5);
@mixin button-style {
background-color: $button-bg-color;
color: $button-text-color;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
&:hover {
background-color: lighten($button-bg-color, 10%);
}
}
button {
@include button-style;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $modal-bg-color;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
width: 50%;
height: 50%;
border-radius: 10px;
box-shadow: 0px 0px 10px grey;
padding: 20px;
}
li {
padding: 10px;
font-size: 16px;
font-weight: bold;
color: grey;
}
JavaScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'scss-app';
showModal: boolean = false;
openModal() {
this.showModal = true;
}
closeModal() {
this.showModal = false;
}
}
Output:
Create Angular Application with SCSS
Similar Reads
How to use SCSS mixins with angular 7?
When working with the Angular CLI, the default stylesheets have the .css extension. Starting an Angular CLI Project with Sass Normally, when we run ng new my-app, our app will have .css files. To get the CLI to generate .scss files (or .sass/.less) is an easy matter. Create a new project with Sass w
5 min read
Servlet - Web Application
Servlets are the Java programs that run on the Java-enabled web server or application server. They are used to handle the request obtained from the webserver, process the request, produce the response, then send a response back to the webserver Working With Servlets Working with Servlets is an impor
8 min read
What is Application Testing?
Application testing is an essential part of the software development process to maintain the standards of the application and its capabilities of providing the functionality for which it is being developed. As much as the user interface is checked to ensure that it meets the needs of the users, func
15+ min read
Angular CLI | Angular Project Setup
Angular is an open-source front-end web application framework that is used for building single-page and complex web applications. By default, angular uses TypeScript for creating logic but as the browser doesn't know typescript it converts typescript into javascript in order to make typescript under
3 min read
What is AWS Serverless Application Repository ?
The AWS serverless application repository enables you to search, deploy, and publish serverless applications. You are also allowed to publish and share your applications with everyone, or you can share them privately among people in your team. People often use the AWS Serverless Application Reposito
5 min read
Project Idea | Technical Wizard - A Quiz Application
Project Title: Technical Wizard - A Quiz Application Introduction:- India has a large number of Engineering Colleges, and almost all of them have Computer Science Branch in them. Now, from personal to professional knowledge of a person in Computer Science needs to be tested after proper intervals o
2 min read
SAP - Systems Applications and Products | A Complete Learning Hub
SAP stands for Systems Applications and Products in Data Processing, a German software program company whose items permit businesses to track clients and business intelligence. SAP, by definition, is additionally the title of the ERP (Enterprise Resource Planning) software as well as the title of th
8 min read
Build an App with Angular and Angular CLI
Angular is a powerful front-end framework that allows developers to create robust web applications. Angular is based on the Model-View-Controller (MVC) architecture and allows for the creation of reusable components, efficient state management, and two-way data binding. The Angular CLI (Command Line
3 min read
Creating First Servlet Application using NetBeans IDE
Servlets are the Java programs that run on the Java-enabled web server or application server. They are used to handle the request obtained from the webserver, process the request, produce the response, then send a response back to the webserver. NetBeans is an integrated development environment (IDE
2 min read
How to style with SASS/SCSS in React ?
Styling in React is very important for creating better user interfaces. using SASS/SCSS in React, which offers many features over traditional CSS, you can write more maintainable and structured stylesheets. Prerequisite:Introduction to SASSKnowledge of ReactNode and NPM/Yarn installedSetting up envi
1 min read