Applying SCSS for styles

Using Gulp and Sass

Hi! In our previous posts, we created .NET Core applications, where we discovered various important tools. For example, in the last post, we examined how to use Globalization in ASP.NET Core.

In this post we are going to show how to include Sass in our project, to work better with css styles.

Installing gulp & sass

First, we need to install gulp in our project. To do this we are going to use npm to run the following commands:

npm install gulp --save-dev

npm install gulp-sass --save-dev

Prepare the gulpfile.js

To use gulp we need to create a gulpfile, to build the tasks that we are going to run later.
In the following example, there are two key tasks.

The first task function is the sass’s definition, we need to create the directory assets/styles to locate our scss file. With this we can import all of the scss solution files from our project, see the simple example below:

The second task function is the watch:sass, we are going to use this to build our css files through our scss files running gulp one at a time.

Prepare the css & scss

Now we need to delete our css files and build our sass files. For this example, we will remove the site.min.css and create this scss

We need to specify the name for our future css file in the _Layout.cshtml, because in this example we are using the site.min.css.

Run gulp sass

To run sass we need to run gulp. This command is going to run the watcher to update the styles every time you change a scss file.

Awesome!

Our application is ready to use scss files to work with styles. In the next post, we are going to see how deploy in .NET Core with Docker.