How to use SaSS for an ASP.NET MVC application?

Question

Problem and question

I've always had problems with CSS code, so now I always use SaSS code. But my question is: how can I use SaSS for an ASP.NET MVC application?

I've tried

I've tried tried to use a Gulp task for this. I've used these commands

npm init
npm install --save gulp
npm install --save gulp-sass

Here is my package.json file:

{
  "name": "markeonline",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Hein Pauwelyn",
  "license": "ISC",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  }
}

Here is the gulpfile.js

var gulp = require("gulp"),
    sass = require("gulp-sass");

// other content removed

gulp.task("sass", function () {
    return gulp.src('./**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest(project.webroot + './MarkeOnline.Website/Content/css'));
});

Here is my project structure:

This code gives me the following error if I use the command below:

gulp sass

ReferenceError: project is not defined

[17:50:58] ReferenceError: project is not defined
    at Gulp.<anonymous> (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\gulpfile.js:9:23)
    at module.exports (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:134:8)
    at C:\Users\hein_\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: node_modules\node-sass\test\fixtures\depth-first\_vars.scss
Error: Undefined variable: "$import-counter".
        on line 1 of node_modules/node-sass/test/fixtures/depth-first/_vars.scss
>> $import_counter: $import_counter + 1;
   -----------------^

    at options.error (D:\Documenten\Howest\Semester 4\05 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\node-sass\lib\index.js:291:26)

Solution 1

Try Web Compiler plugin instead this is what I use to compile SCSS in MVC.

A Visual Studio extension that compiles LESS, Sass, JSX, ES6 and CoffeeScript files.

Solution 2

You can use another way easier I think.

Step 1

Go with this steps in your NuGet Manager.

1. Add Microsoft.AspNet.Web.Optimization

2. Add BundleTransformer.SassAndScss

3. Add LibSassHost.Native.win-x64 if you use system 64 bit.

4. LibSassHost.Native.win-x86

Step2

In BundleConfig.cs add this code in RegisterBundles methode.

var nullBulider = new NullBuilder();
var nullOrderer = new NullOrderer();

BundleResolver.Current = new CustomBundleResolver();
var commonStyleBundle = new CustomStyleBundle("~/Bundle/sass");

commonStyleBundle.Include("~/css/main.scss");
commonStyleBundle.Orderer = nullOrderer;
bundles.Add(commonStyleBundle);

Step 3

Add CSS folder in your project and add main.scss file sheet inside.

Step 4

In your view, you need to use System.Web.Optimization.

@using System.Web.Optimization

And link your style sheet

@Styles.Render("~/Bundle/sass").

Step 5

In Global.asax we need to add this line in Application_Start().

RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);

Or maybe you will find it already in your class if you use MVC templet.

And that is it your main.scss its work.

Solution 3

This is how you can add Sass to your Mvc app:

• Download WebCompiler: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler&ssr=false#qna
• Double click on the Vsix file to install it.
• Right click on solution, Manage Nuget Packages
• Download bootstrap.sass package (version 4 or above)
• Right click on the bootstrap.scss file under Content folder you need and select Web Compiler - Compile File
• The bootstrap.css file will be generated.
• You can select any scss file to compile.
• You can see the configuration (list of files to be compiled) in the compilerconfig.json file in the root folder.

• Add the css file to the bundle.

  bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap/main.css",
            "~/Content/site.css"));
  

If you need to customize bootstrap, add a main.scss file in the same folder as bootstrap.scss. Then compile it using Web Compiler.

main.scss:

/* import the necessary Bootstrap files */
@import "_functions.scss";
@import "_variables.scss";

/* make changes to the !default Bootstrap variables */
$body-color: green;

/* finally, import Bootstrap to set the changes! */
@import "bootstrap.scss";

This example includes all the files, but make sure you only add the files you need to make the css smaller.