asp.net-mvc - 如何在 ASP.NET MVC 应用程序中使用 SaSS？

Question

问题和疑问

我一直在使用 CSS 代码时遇到问题，所以现在我总是使用 SaSS 代码。但我的问题是:如何将 SaSS 用于 ASP.NET MVC 应用程序？

我已经尝试过

我尝试使用 Gulp 任务来实现此目的。我使用过这些命令

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

这是我的package.json 文件:

{
  "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"
  }
}

这是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'));
});

这是我的项目结构:

如果我使用以下命令，此代码会出现以下错误:

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

尝试Web Compiler相反，这是我在 MVC 中编译 SCSS 的插件。

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