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
Steps to Create an Express.js Application
Creating an Express.js application involves several steps that guide you through setting up a basic server to handle complex routes and middleware. Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. Hereâs a
10 min read
AngularJS | Application
Applications in AngularJS enable the creation of real-time Applications. There are four primary steps involved in creation of Applications in AngularJS: Creation of List for an Application. Adding elements in the List. Removing elements from the List. Error Handling Below are the steps for creations
3 min read
Deploy a React Application with AWS
AWS is a subsidiary of Amazon & offers a broad range of cloud computing services, which means services using their infrastructure which is hosted on various data centers all over the world which we can rent to run our own solutions. In this article, we will learn how to deploy a React applicatio
4 min read
Create a Quiz Application Using JavaScript
In this article, we will learn how to create a quiz application using JavaScript. The quiz application will contain questions followed by a total score shown at the end of the quiz. The score will increase based on the correct answers given. Initially, there are only three questions, but you can inc
4 min read
Weather Application using ReactJS
In this article, we will develop an Interactive Weather Application using ReactJS Framework. The developed application will provide real-time weather information to the user for the city they have searched. If the user searches, for the wrong city, an Error message is also displayed to the user, sta
5 min read
Crafting a stunning CRUD Application with MERN stack
Creating a CRUD (Create, Read, Update, Delete) application using the MERN stack is an excellent way to build dynamic web applications with JavaScript technologies. The MERN stack consists of MongoDB, Express.js, React, and Node.js, offering a full-stack JavaScript solution for building modern web ap
5 min read
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
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
Create a Single Page Application using HTML CSS & JavaScript
In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more in
4 min read
What is Application Security Testing?
The major goal of software development is to develop an application that is scalable, secure, flexible, and also meets the requirements of the clients. To ensure the security of the application various measures are taken by the developers to protect against any attack on the data. One such method is
8 min read