title: How to use SaSS for an ASP.NET MVC application?
body: <h2>Problem and question</h2>
  
  <p>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?</p>
  
  <p><a href="https://cloud.githubusercontent.com/assets/16222780/22893413/ecb2f00c-f215-11e6-8d90-52930964b6ad.gif" rel="noreferrer"><img src="https://cloud.githubusercontent.com/assets/16222780/22893413/ecb2f00c-f215-11e6-8d90-52930964b6ad.gif" alt=""></a></p>
  
  <h2>I've tried</h2>
  
  <p>I've tried tried to use a Gulp task for this. I've used these commands</p>
  
  <pre class="lang-shell prettyprint-override"><code>npm init
  npm install --save gulp
  npm install --save gulp-sass
  </code></pre>
  
  <p>Here is my <code>package.json</code> file:</p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "name": "markeonline",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "Hein Pauwelyn",
    "license": "ISC",
    "dependencies": {
      "gulp": "^3.9.1",
      "gulp-sass": "^3.1.0"
    }
  }
  </code></pre>
  
  <p>Here is the <code>gulpfile.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>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'));
  });
  </code></pre>
  
  <p>Here is my project structure:</p>
  
  <p><a href="https://i.stack.imgur.com/VsdaC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VsdaC.png" alt="Solution explorer at Visual Studio"></a></p>
  
  <p>This code gives me the following error if I use the command below:</p>
  
  <pre class="lang-shell prettyprint-override"><code>gulp sass
  </code></pre>
  
  <blockquote>
    <p><strong>ReferenceError:</strong> project is not defined</p>
    
    <pre class="lang-none prettyprint-override"><code>[17:50:58] ReferenceError: project is not defined
      at Gulp.&lt;anonymous&gt; (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
  &gt;&gt; $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)
  </code></pre>
  </blockquote>