web-dev-qa-db-ja.com

Visual Studio 2015で保存時に.sassファイルをコンパイルする方法

Visual Studio 2015でフルsass（つまりscss）プリコンパイラー環境を稼働させるにはどうすればよいですか？これは、 以下に関するこの質問 への兄弟質問です。

asp.netsassgruntjsvisual-studio-2015
65
Nicholas Petersen

Gulp + Visual Studio 2015を使用している場合

  1. 最初にgulp-sassをインストールします。これはpackage.jsonファイルです
{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }
  1. Gulpfile.jsで
   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   gulp.task('sass', function() {
     gulp.src(paths.scss)
       .pipe(sass())
       .pipe(gulp.dest(paths.webroot + "css"));
   });
   gulp.task('watch-sass', function() {
     gulp.watch(paths.scss, ['sass']);
   })
  1. 「Task Runner Explorer」を開き、タスクをダブルクリックします：「watch-sass」 Task Runner Explorer

これで、scssを保存するたびに、cssはsassファイルをコンパイルして変更します。

31
Sanchitos

これは、Visual Studioで自分の方法をクリックするだけで、むかつくことなく達成することもできます。

Webコンパイラをインストールする

  1. Visual Studioで、[ツール]-> [拡張機能と更新プログラム]を押します。
  2. Webコンパイラ（Mads Kristensenが作成）を検索してインストールします。
  3. Visual Studioの再起動が必要になります。

ファイルをコンパイルする

  1. ソリューションエクスプローラーで.scssファイルを右クリックして、コンパイルをセットアップします。
  2. Web Compiler-> Compile File（Shift + Alt + Q）を押します。

Compilerconfig.jsonというファイルがプロジェクトのルートに作成され、そこでコンパイラの動作を変更できます。 compilerconfig.jsonファイルを右クリックすると、構成されたすべてのコンパイラを簡単に実行できます。

Visual Studio内で.scssfileが変更されると、コンパイラーが自動的に実行され、コンパイル済みの出力ファイルが生成されます。

ビルド時にコンパイル

  1. Compilerconfig.jsonファイルを右クリックします
  2. Webコンパイラを押します->ビルド時にコンパイルを有効にします
  3. メニュー項目をクリックすると、プロジェクト自体にファイルを追加せずに、NuGetパッケージがパッケージフォルダーにインストールされるという情報が表示されます。 NuGetパッケージには、プロジェクトのルートにあるcompilerconfig.jsonファイルでまったく同じコンパイラーを実行するMSBuildタスクが含まれています。
105
willedanielsson

VS2015用Webコンパイラ拡張機能

Gulpが必要です。 npm install -g gulp

これが役立つことを願っています...

編集：

Webコンパイラーが文字列をUnicode文字に変換するべきではないときに、その問題に遭遇しました。私はこの実装に切り替えました http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ VS2015でCSSを正しくコンパイルしています。他の誰かが同じ問題に遭遇した場合に備えて追加されました。

9
Jim Harkins

コンパイルを手動で設定する複雑さをいじりたくない場合は、これを処理できる驚くほど簡単な拡張機能がいくつかあります。

WebCompiler（無料）

既に言及されていますが、Mads Kristensen（Web Essentialsの作者）は Web Compiler というスタンドアロンのコンパイルツールを作成しました。インストールするだけで、コンパイルするSASSファイルを右クリックして、[Webコンパイラ]> [ファイルのコンパイル]を選択します。その時点から監視され、保存されるたびにファイルがコンパイルされます。

Webコンパイラのダウンロード

CompileSASS（無料）

Webコンパイラと同様に、これはVS2013とVS2015の両方で動作するように作成されたスタンドアロンの拡張機能です。 Web Essentials拡張。それは軽量であり、優れたエラー報告で非常にうまく機能します。拡張機能について著者のブログを読む here 。

コンパイルSASSをダウンロード

Web Workbench（無料/有料）

MindscapeのWeb Workbench は、SASSをコンパイルするときに長年にわたって私のお気に入りの拡張機能でしたが、その後、無料の代替機能を支持して移動しました。それでも、Proバージョンは出力ファイルをカスタマイズする多くの方法を備えた強力なツールですが、無料のツールがあることを考えるとかなり高価です（$ 39）。

Web WorkBenchをダウンロード

6
Chris Spittles

この質問に答える手順のほとんどは、「Maverick」によって与えられた手順と同じです この投稿で 少ない費用で同じことを行う方法に関する懸念。しかし、誰かが私に単純にsassを含めるようにその質問を変更することを許可しませんでした（おそらく最高でした、私は知りません）。したがって、次の答えは、上記の投稿でMaverickが指定した手順に依存していますが、これらの違いは次のとおりです。

（空のプロジェクトの事前ステップ）空のプロジェクトで開始した場合、最初にGruntを追加し、バウアー：

ソリューションを右クリック->追加->「Grunt and Bower to Project」（すべてインストールされるまで1分間待ちます）

package.json：

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-sass": "^0.9.2"
}

（FYI： grunt-contrib-sassリンク ）

次に：

依存関係-> NPMを右クリック->パッケージの復元。

gruntfile.js

1）これらの3行が（NPMタスクとして）下部近くに登録されていることを追加または確認します。

grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");

2）gruntfile.jsで、次のような初期設定を追加します。

{注意：このような構成の専門家ではありません。私はクレジットを与えるために現時点では見つけることができない素晴らしいブログ投稿でsass設定を見つけました。重要なのは、特定のフォルダー（および子孫）内でプロジェクト内のallファイルを検索することでした。以下はそれを行います（"someSourceFolder/**/*.scss"、および 重要な関連ノートを参照 に注意してください）。 }

// ... after bower in grunt.initConfig ...
"default": {
    "files": [
        {
            "expand": true,
            "src": [ "someSourceFolder/**/*.scss" ],
            "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
            "ext": ".css"
        }
    ]
},
"watch": {
    "sass": {
        "files": [ "someSourceFolder/**/*.scss" ],
        "tasks": [ "sass" ],
        "options": {
            "livereload": true
        }
    }
}

次に、他の回答に記載されているTask Runner Explorerの指示に従います。必ずプロジェクトを閉じて開き直してください。ウォッチを見るためにプロジェクトを開始するたびに「ウォッチ」（「タスク」の下）を実行（ダブルクリック）する必要があるようですが、その後の保存で動作します。

4
Nicholas Petersen