asp.net-mvc 如何将 SaSS 用于 ASP.NET MVC 应用程序？

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

提问by H. Pauwelyn

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?

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

I've tried

我试过了

I've tried tried to use a Gulp task for this. I've used these commands

我试过为此使用 Gulp 任务。我用过这些命令

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

Here is my package.jsonfile:

这是我的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"
  }
}

Here is the gulpfile.js

这里是 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:

这是我的项目结构：

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 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\gulpfile.js:9:23)
    at module.exports (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (D:\Documenten\Howest\Semester 4 - 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 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\node-sass\lib\index.js:291:26)

参考错误：项目未定义

[17:50:58] ReferenceError: project is not defined
    at Gulp.<anonymous> (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\gulpfile.js:9:23)
    at module.exports (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (D:\Documenten\Howest\Semester 4 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (D:\Documenten\Howest\Semester 4 - 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 - Project\MarkeOnlinebis\Project Execution\MarkeOnline\node_modules\node-sass\lib\index.js:291:26)

采纳答案by Ryan Holmes

Try Web Compilerplugin instead this is what I use to compile SCSS in MVC.

尝试使用Web Compiler插件代替这是我用来在 MVC 中编译 SCSS 的。

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

一个编译 LESS、Sass、JSX、ES6 和 CoffeeScript 文件的 Visual Studio 扩展。

回答by haydar M.Al-samawe

You can use another way easier I think.

我认为您可以更轻松地使用另一种方法。

Step 1

第1步

Go with this steps in your NuGet Manager.

在您的 NuGet 管理器中执行此步骤。

1. Add Microsoft.AspNet.Web.Optimization

2. Add BundleTransformer.SassAndScss

3. Add LibSassHost.Native.win-x64if you use system 64 bit.

4. LibSassHost.Native.win-x86

1. 添加 Microsoft.AspNet.Web.Optimization

2. 添加 BundleTransformer.SassAndScss

3. LibSassHost.Native.win-x64如果您使用系统 64 位，请添加。

4. LibSassHost.Native.win-x86

Step2

第2步

In BundleConfig.csadd this code in RegisterBundlesmethode.

在方法中BundleConfig.cs添加此代码RegisterBundles。

var nullBulider = new NullBuilder();
var nullOrderer = new NullOrderer();

BundleResolver.Current = new CustomBundleResolver();
var commonStyleBundle = new CustomStyleBundle("~/Bundle/sass");

commonStyleBundle.Include("~/css/main.scss");
commonStyleBundle.Orderer = nullOrderer;
bundles.Add(commonStyleBundle);

Step 3

第 3 步

Add CSS folder in your project and add main.scssfile sheet inside.

在您的项目中添加 CSS 文件夹并在其中添加main.scss文件表。

Step 4

第四步

In your view, you need to use System.Web.Optimization.

在您看来，您需要使用System.Web.Optimization.

@using System.Web.Optimization

And link your style sheet

并链接您的样式表

@Styles.Render("~/Bundle/sass").

Step 5

第 5 步

In Global.asaxwe need to add this line in Application_Start().

在Global.asax我们需要在Application_Start().

RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);

Or maybe you will find it already in your class if you use MVC templet.

或者，如果您使用 MVC 模板，也许您会在您的班级中找到它。

And that is it your main.scssits work.

这就是你main.scss的工作。

回答by live-love

This is how you can add Sass to your Mvc app:

这是将 Sass 添加到 Mvc 应用程序的方法：

• Download WebCompiler: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler&ssr=false#qna
• Double click on the Vsix file to install it.
• Right click on solution, Manage Nuget Packages
• Download bootstrap.sass package (version 4 or above)
• Right click on the bootstrap.scss file under Content folder you need and select Web Compiler - Compile File
• The bootstrap.css file will be generated.
• You can select any scss file to compile.
• You can see the configuration (list of files to be compiled) in the compilerconfig.json file in the root folder.

• Add the css file to the bundle.

  bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap/main.css",
            "~/Content/site.css"));
  

• 下载 WebCompiler：https://marketplace.visualstudio.com/items ?itemName =MadsKristensen.WebCompiler &ssr =false#qna
• 双击 Vsix 文件进行安装。
• 右键单击解决方案，管理 Nuget 包
• 下载 bootstrap.sass 包（版本 4 或以上）
• 右键单击您需要的Content文件夹下的bootstrap.scss文件，然后选择Web Compiler - Compile File
• 将生成 bootstrap.css 文件。
• 您可以选择任何 scss 文件进行编译。
• 可以在根文件夹下的compilerconfig.json文件中看到配置（要编译的文件列表）。

• 将 css 文件添加到包中。

  bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap/main.css",
            "~/Content/site.css"));
  

If you need to customize bootstrap, add a main.scss file in the same folder as bootstrap.scss. Then compile it using Web Compiler.

如果需要自定义bootstrap，在bootstrap.scss所在的文件夹中添加一个main.scss文件。然后使用 Web Compiler 编译它。

main.scss:

主文件：

/* import the necessary Bootstrap files */
@import "_functions.scss";
@import "_variables.scss";

/* make changes to the !default Bootstrap variables */
$body-color: green;

/* finally, import Bootstrap to set the changes! */
@import "bootstrap.scss";

This example includes all the files, but make sure you only add the files you need to make the css smaller.

此示例包含所有文件，但请确保仅添加使 css 更小所需的文件。