How to use SaSS for an ASP.NET MVC application? - asp.net-mvc

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)

Answer 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.

Answer 2

You can use another way easier I think.
Step 1
Go with this steps
in your NuGet Manager.
Add Microsoft.AspNet.Web.Optimization
Add BundleTransformer.SassAndScss
Add LibSassHost.Native.win-x64 if you use system 64 bit.
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.

Answer 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.