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
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
We need to specify the name for our future css file in the
_Layout.cshtml, because in this example we are using the
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
Our application is ready to use
scss files to work with styles. Stay tuned for the next post.