MVC 核心中的 Sass

Question

我是 ASP.NET Core MVC 的新手。 在 MVC 5 中，我只需 NuGet BundleTransformer.SassAndScss，然后创建一个 SCSS 文件，这样就可以了。

现在，看到教程，每个人都认为我有 gulpfile.js、package.json、npm 等。 我在一家 webform C# 公司中得到了相当的庇护，最近刚刚转换为 MVC5，并被告知要迁移到 Core。

When I create a Core project，我可以像往常一样创建 SCSS 文件，但不能编译它们。 现在，我很想拥有一个 nuget 包并忘记它，但到目前为止我安装的包都没有工作。所以我正在探索 NPM，但没有节点，因为我的理解是 Node 是一种完全不同的语言，我安装在计算机本身上，我不确定当我推送到 git 时我的同事是否会拥有它，等等

我花了一天时间查看不同的教程，但似乎没有一个与我从同一个地方开始。

这是最官方的教程（他们假设我有一个 gulpfile.js，但我没有，而且当我创建一个时，该教程不起作用）。 https://docs.asp.net/en/latest/client-side/less-sass-fa.html#id3

那么，有没有人有一个非常基本的教程或示例项目，从非常 .NET 背景开始？

Answer 1

所以我纠正了我的错误。以下是从 Visual Studio 中的 MVC Core 模板运行 SCSS 文件的所有步骤。

1. 在 src 文件夹下，右键单击您的项目名称并添加一个名为“package.json”的文件。
2. 将此粘贴​​到“package.json”中：

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
     "gulp": "3.9.1",
     "gulp-sass": "2.3.2",
     "rimraf": "2.5.4"
  }
}

1. 同样，在项目的根目录下，添加一个名为“Gulpfile.js”的文件。
2. 把这段代码粘贴进去：

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

gulp.task("sass", function () {
return gulp.src('wwwroot/css/site.scss')
  .pipe(sass())
  .pipe(gulp.dest('wwwroot/css'));
});

5. 现在进入 wwwroot 文件夹，css 文件夹，and add a SCSS file called "site.scss" (name does not matter)。但是，如果您将其命名为 site.scss，请确保删除默认的 site.css，以确保您的工作正常。
6. 在您的 scss 文件中，放入一些 scss 代码。例如：

$base: #000000;
body {
   background-color: $base;
}

1. 如果你只是运行它，它会工作，但我必须承认我还是进去了 View->Other Windows->Task Runner Explorer，我看到了任务sass，右键，运行，它工作，然后我运行了整个项目。请记住，_Layout 和 bundleconfig.json 中已经有对 site.css 文件的引用，因此如果您为 scss 文件选择了另一个名称或路径，请相应地更改它....嗯，更改 scss 并重新- 运行它不会改变前端。我需要进入任务运行器资源管理器并每次重新运行它......必须有一种方法可以在保存时运行 gulpfile 任务......
2. 好的，我必须在 gulpfile.js 中添加一个 Watch 任务并在 Task Runner Explorer 中运行它。

gulp.task('watch', function () {
   gulp.watch('wwwroot/css/site.scss', ['sass']);
});