开发者问题收集

如何将SASS用于ASP.NET MVC应用程序？

2017-02-13
50591
asp.net-mvc sass gulp

问题和疑问

我一直对 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'));
});

这是我的项目结构：

Solution explorer at Visual Studio

如果我使用以下命令，此代码会给我以下错误： 

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)
3个回答

尝试使用 Web Compiler 插件，这是我在 MVC 中编译 SCSS 时使用的插件。

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

Ryan Holmes
2017-02-13

我认为您可以使用另一种更简单的方法。

步骤 1

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

  1. 添加 Microsoft.AspNet.Web.Optimization

  2. 添加 BundleTransformer.SassAndScss

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

  4. LibSassHost.Native.win-x86

步骤 2

在 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);

步骤 3

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

步骤 4

在您的视图中，您需要使用 System.Web.Optimization 。 

@using System.Web.Optimization

并链接您的样式表 

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

步骤 5

在 Global.asax 中，我们需要在 Application_Start() 中添加此行。 

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

或者，如果您使用 MVC 模板，您可能已经在您的类中找到它了。

这就是您的 main.scss 的工作。

haydar M.Al-samawe
2018-08-31

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

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

  • 将 css 文件添加到包中。 

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

如果您需要自定义 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";

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

live-love
2019-04-23