如何将 SaSS 用于 ASP.NET MVC 应用程序?
Posted
技术标签:
【中文标题】如何将 SaSS 用于 ASP.NET MVC 应用程序?【英文标题】:How to use SaSS for an ASP.NET MVC application? 【发布时间】:2017-07-01 18:36:14 【问题描述】:问题和疑问
我一直在使用 CSS 代码时遇到问题,所以现在我总是使用 SaSS 代码。但我的问题是:
我试过了
我尝试过为此使用 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:项目未定义
[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)
【问题讨论】:
GIF 非常准确。你经历过这个吗? docs.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa 【参考方案1】:尝试使用Web Compiler 插件,这是我在 MVC 中编译 SCSS 时使用的。
一个编译 LESS、Sass、JSX、ES6 和 CoffeeScript 文件的 Visual Studio 扩展。
【讨论】:
【参考方案2】:我认为你可以使用另一种更简单的方法。
步骤 1
按照这些步骤进行 在你的 NuGet 管理器中。
添加Microsoft.AspNet.Web.Optimization
添加BundleTransformer.SassAndScss
如果您使用的是 64 位系统,请添加 LibSassHost.Native.win-x64
。
LibSassHost.Native.win-x86
第二步
在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);
第三步
在您的项目中添加 CSS 文件夹并在其中添加 main.scss
文件表。
第四步
在你看来,你需要使用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
它的工作。
【讨论】:
这行得通,但我担心它如何在 \bin 中放置大量 dll 来实现它。【参考方案3】:这是您可以将 Sass 添加到 Mvc 应用程序的方法:
下载网页编译器: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler&s-s-r=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"));
如果您需要自定义引导程序,请在与 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 更小所需的文件。
【讨论】:
以上是关于如何将 SaSS 用于 ASP.NET MVC 应用程序?的主要内容,如果未能解决你的问题,请参考以下文章
如何将 ASP.NET Identity 实现到一个空的 MVC 项目
如何在 ASP .net MVC 4 应用程序的 HTML5 中创建带有可点击选项的水平条形图? [关闭]