Create Angular Application with SCSS
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.
- app.component.html
<div class="center">
<h1 style="color: green;">
w3wiki
</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>
- app.component.scss
$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;
}
- app.component.ts
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.
- app.component.html
<div class="center">
<h1 style="color: green;">w3wiki</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>
- app.component.scss
$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;
}
- app.component.ts
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:
Contact Us