MVC Core中的Sass

Question

我是MVC Core的新手。 在MVC 5中，我只是将NuGet BundleTransformer.SassAndScss，并创建一个SCSS文件，这将工作。

现在，看到教程，每个人都假设我有gulpfile.js，package.json，npm等。 我一直相当庇护，在一个webform C＃公司，刚刚被转换为MVC5，并被告知转移到核心。

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

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

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

1. 如果你只要运行它，它会工作，但我必须承认，我仍然在 查看 - >其他窗口去 - >任务运行资源管理器，我看到了任务sass，右键单击它，运行，它工作，然后我跑了整个项目。请记住，_Layout和bundleconfig.json中已经有对site.css文件的引用，所以如果您为scss文件选择了另一个名称或路径，请相应地更改它....嗯，更改scss和re - 运行它不会改变前端。我需要去任务亚军探险家和重新运行它每次...必须有一种方法来运行保存gulpfile任务...
2. 好吧，我不得不在gulpfile.js中添加一个Watch任务并运行它在Task Runner Explorer中运行。

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

开始=“7”>
开始=>

开始=>