Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

Solution explorer at Visual Studio

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) 
like image 296
H. Pauwelyn Avatar asked Feb 13 '17 17:02

H. Pauwelyn


People also ask

How do I compile sass in Visual Studio 2019?

So you have to right-click each Bulma SASS file and select "Web Compiler" --> "Compile file". This will add it to the . json file and create/compile a . css file.

How do I run a sass script?

To compile a Sass/SCSS script, we use the sass command in the terminal. We write the word sass , followed by the location of the sass script we want to compile, and then the location of the css file it should compile to.


1 Answers

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.

like image 86
Ryan Holmes Avatar answered Sep 20 '22 20:09

Ryan Holmes