SCSSファイルをコンパイルして、CSSファイルを生成する - Visual Studio

Visual StudioでSCSSファイルをコンパイルして、CSSファイルを生成する手順を紹介します。

事前準備

Visual StudioにWeb Compilerをインストールします。 手順はこちらの記事を参照してください。

手順

Visual StudioでSCSSファイルのあるプロジェクトを開きます。


ソリューションエクスプローラーでSCSSファイルの項目を選択し右クリックします。 Web Compilerがインストールされていれば、下図のポップアップメニューが表示されます。メニューに[Web Compiler]の項目が追加されています。


[Web Compiler]のサブメニューに[Compile file]の項目をクリックします。


SCSSファイルのコンパイルが始まります。進行状況がウィンドウ下部のステータスバーに表示されます。


コンパイルが完了すると、CSSファイルが作成されいます。


ソリューションエクスプローラーでは、SCSSファイルの子ノードにcssファイルが表示され、さらにその子ノードにcssファイルから 改行や空白を除去したmin.css ファイルが作成されます。


CSSファイルを開きます。スタイルシートが作成できています。


ソリューションエクスプローラーではcssファイルやmin.cssファイルはSCSSファイルの子ノードとして表示されていますが、 実際のディレクトリ配置では、SCSSファイルと同じディレクトリに生成されます。