【Visual Studio Code】node-sassでSassコンパイルする方法

2020年10月20日開発ツールVisual Studio Code

【Visual Studio Code】node-sassでSassコンパイルする方法
【Visual Studio Code】node-sassでSassコンパイルする方法

Visual Studio CodeでSassコンパイルする方法を紹介します。今回の手順は「Visual Studio Code で Sass(scss)コンパイルを行うシンプルな方法」を参考にして環境を構築していきました。

  • Visual Studio Code：1.50.1
  • Nodist：0.9.1
  • npm：6.9.0
  • Node.js：11.13.0
  • node-sass：4.14.1

Visual Studio CodeでSassコンパイルする手順

Visual Studio CodeでSassコンパイルを行うための手順を紹介します。

Visual Studio Codeとは
Microsoftが提供している無料のエディタです。機能も充実しておりWindowsに限らずMacでも動作するため人気なコードエディタです。

Sassについて

Sassのコンパイル環境を構築する前に、Sassについて簡単に紹介します。

Sassとは

Sass(Syntactically Awesome StyleSheet)とは、CSSを効率的に記述できるように設計された言語です。

Sassを記述する記法は「SASS記法」と「SCSS記法」の2種類あります。現在はSCSS記法を使うことが多いです。

SASS記法
rubyのような記述なのが特徴です。またファイルの拡張子が.sassとなります。

SCSS記法
SASS記法とは違ってCSSの記述に近いのが特徴です。ファイルの拡張子は.scssとなります。ちなみにSASSがCSSとの互換性が乏しかったために作られた記法だそうです。

Sassを使うメリット・デメリット
Sassを使うメリットとデメリットですが、

  • メリット
    • 作業効率が格段にアップ
  • デメリット
    • 環境準備が面倒
    • 学習コスト

といった感じです。

nodistでNode.jsをインストール

nodistでNode.jsをインストールします。まずGitHubに公開されている「nullivex / nodist」を表示します。

nodist

WindowsでnpmとNode.jsのバージョンを管理できるマネージャ。

GitHubのnodistを表示

nodistをインストール - GitHubを表示
nodistをインストール – GitHubを表示

画面下部の「Installation」の「Download the installer from the releases page」からインストーラのダウンロードページを開きます。

nodistをインストール - GitHubからnodistのインストーラーをダウンロード
nodistをインストール – GitHubからnodistのインストーラーをダウンロード

インストーラの「NodistSetup-v0.9.1.exe」をクリックしてダウンロードします。

nodistをインストール - GitHubからnodistのインストーラーをダウンロード
nodistをインストール – GitHubからnodistのインストーラーをダウンロード

NodistSetup-v0.9.1.exeを実行

ダウンロードしたインストーラの「NodistSetup-v0.9.1.exe」を実行します。

nodistをインストール - NodistSetup-v0.9.1.exeを実行
nodistをインストール – NodistSetup-v0.9.1.exeを実行

「Next」を押下します。

nodistをインストール - NodistSetup-v0.9.1.exeを実行
nodistをインストール – NodistSetup-v0.9.1.exeを実行

「I Agree」を押下します。

nodistをインストール - NodistSetup-v0.9.1.exeを実行
nodistをインストール – NodistSetup-v0.9.1.exeを実行

インストールするディレクトリを指定します。デフォルトのままで「Install」を押下します。

nodistをインストール - NodistSetup-v0.9.1.exeを実行
nodistをインストール – NodistSetup-v0.9.1.exeを実行

インストールが開始されます。

nodistをインストール - NodistSetup-v0.9.1.exeを実行
nodistをインストール – NodistSetup-v0.9.1.exeを実行

インストールが完了したら「Finish」を押下します。

Node.jsの動作確認

コマンドプロンプトでインストールしたNode.jsのバージョンを確認します。

C:\Users\ut > node -v
v11.13.0

node-sassモジュールをインストール

コマンドプロンプトでnodistでインストールされたnpmパッケージマネージャを使ってnode-sassをインストールします。

node-sass

node-sass は、Sass（Ruby)のスタイルシートプリプロセッサの C言語バージョン LibSass を Node.js で使用できるようにしたライブラリモジュールで、高速に scss ファイルをコンパイルして css ファイルに変換することが出来ます。

C:\Users\ut > npm install -g node-sass
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Program Files (x86)\Nodist\bin\node-sass -> C:\Program Files (x86)\Nodist\bin\node_modules\node-sass\bin\node-sass
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\11.13.0\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> node-sass@4.14.1 install C:\Program Files (x86)\Nodist\bin\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-67_binding.node
Download complete  ] - :
Binary saved to C:\Program Files (x86)\Nodist\bin\node_modules\node-sass\vendor\win32-x64-67\binding.node
Caching binary to C:\Users\ut\AppData\Roaming\npm-cache\node-sass\4.14.1\win32-x64-67_binding.node

> node-sass@4.14.1 postinstall C:\Program Files (x86)\Nodist\bin\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Program Files (x86)\Nodist\bin\node_modules\node-sass\vendor\win32-x64-67\binding.node
Testing binary
Binary is fine
+ node-sass@4.14.1
added 190 packages from 139 contributors in 12.558s

各バージョンを確認

nodist、Node.js、npm、node-sassのバージョンを確認します。

C:\Users\ut>nodist -v
0.9.1

C:\Users\ut>node -v
v11.13.0

C:\Users\ut>npm -v
6.9.0

C:\Users\ut>node-sass -v
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

Visual Studio CodeでSassコンパイル環境を構築

node-sassのインストールできたので、次にVisual Studio CodeでSassをコンパイルする準備を行います。

Sassのコンパイル準備を行うと、以下のフォルダ構成が作成されます。

フォルダ
　├ .vscode
　│ └tasks.json
　├sass
　│ └style.scss
　├package.json
　└style.css

Sassのコンパイル準備

Visual Studio CodeでSassコンパイルする準備を行います。

Visual Studio CodeでSassコンパイル環境を構築
Visual Studio CodeでSassコンパイル環境を構築

[Shift] + [Ctrl] + [p]でコマンドパレットを表示します。そして[Configure Task]と入力し、「Configure Task」を選択します。

Visual Studio CodeでSassコンパイル環境を構築
Visual Studio CodeでSassコンパイル環境を構築

「Select a task to configure」で「npm: build-sass」を選択すると、隠しフォルダの.vscodeにtasks.jsonが作成されます。

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",
			"script": "build-sass",
			"group": "build",
			"problemMatcher": [],
			"label": "npm: build-sass",
			"detail": "node-sass sass/style.scss style.css --output-style compressed -w"
		}
	]
}
tasks.json

Visual Studio Codeで実行(ビルド)させたい処理を登録するための定義ファイル。

今回だとtasks.jsonにnode-sassでコンパイルする処理を定義しました。

node-sass sass/style.scss style.css --output-style compressed -w
Visual Studio CodeでSassコンパイル環境を構築
Visual Studio CodeでSassコンパイル環境を構築

[Shift] + [Ctrl] + [b]で「Select the build task to run」の「npm: build-sass」を選択すると、package.jsonが作成されます。

{
	"name": "package.json",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build-sass": "node-sass sass/style.scss style.css --output-style compressed -w"
	},
	"author": "",
	"license": "ISC"
}

動作確認

ここまで来たらもう完了です。

Visual Studio Codeでstyle.scssファイルを開き、コードを編集します。するとstyle.scssがコンパイルされててstyle.cssが更新されます。

Visual Studio Codeの設定

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

Webプログラマ兼ブロガー | プログラミング基礎知識を発信｜Webプログラマ歴は10年以上｜JavaScript,PHP.HTML | 「人生の時間は有限。悪いことをしている時間はない」
→プロフィール

2020年10月20日開発ツールVisual Studio Code

Posted by ユート