web-dev-qa-db-ja.com

ASP.NET MVCアプリケーションにSaSSを使用する方法は？

問題と質問

私はいつもCSSコードに問題があったので、今は常にSaSSコードを使用しています。しかし、私の質問は次のとおりです。ASP.NETMVCアプリケーションで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'));
});

私のプロジェクト構造は次のとおりです。

Solution Explorer at Visual Studio

次のコマンドを使用すると、このコードで次のエラーが表示されます。

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)
asp.net-mvcsassgulp
14
H. Pauwelyn

代わりに Web Compiler pluginを試してください。これは、MVCでSCSSをコンパイルするために使用するものです。

LESS、Sass、JSX、ES6、CoffeeScriptファイルをコンパイルするVisual Studio拡張機能。

11
Ryan Holmes

別の方法を簡単に使用できると思います。

ステップ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

プロジェクトにCSSフォルダーを追加し、その中に_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_その仕事です。

10
haydar M.Al-samawe

これは、MassアプリにSassを追加する方法です。

  • WebCompilerのダウンロード： https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler&ssr=false#qna
  • Vsixファイルをダブルクリックしてインストールします。
  • ソリューションを右クリックして、Nugetパッケージを管理します
  • Bootstrap.sassパッケージをダウンロードする（バージョン4以降）
  • 必要なコンテンツフォルダの下のbootstrap.scssファイルを右クリックし、[Webコンパイラ-ファイルのコンパイル]を選択します。
  • 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コンパイラを使用してコンパイルします。

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を小さくするために必要なファイルのみを追加してください。

0
live-love