To start working with SASS/SCSS in a new ASP.NET Core application, we need to create
some files and tasks first. In this example, we are going to work with Gulp to build our SCSS files.
The gulpfile.js file
First, we need to create a new gulpfile.js file at our application route folder. In this file, we are going to
define our gulp tasks. Here is a default implementation of this:
We can see in the last task, our sass task, that we are going to use a Styles
folder with a main.scss file for our starter point. This is located at the root
of our application. We need to create this folder and file.
The package.json file
Now, we can add Gulp and the required dependencies to our package.json file.
If the file didn’t exist, create it at the root folder of your application.
The Task Runner Explorer
In Visual Studio, right click the gulpfile.js file and select Task Runner Explorer.
We can now see the list of Gulp tasks. If you don’t, you might have to click the refresh button.
Form the task runner explorer window, right click the sass task and under Bindings,
select Before Build. This is going to launch the sass task before every build for us.
Import our new css file in _layout
To make our new styles work, we need to add a new <link> tag to our Views/Shared/_Layout.cshtml file.
In our Development environement section in the head we need to add:
In our Staging,Production environment, we can add:
And that is it, we can now start working with our starter file located at
<app_root>/Styles/main.scss and build our styles using SASS/SCSS.