Sass 導入方法(2019年版) Node.js gulp.js のインストール

Sass 導入方法(2019年版) Node.js gulp.js のインストール

HISAHISA
この記事は、2019年11月25日に編集し、約 2 分で読めます。

Sass を導入する方法は、本当に色々ありますが、一番ポピュラー(現場でよく使われている)で簡単な方法をまとめておきます。
その方法は Node.js + gulp.js です。

Node.js と gulp.js

めちゃくちゃザックリ簡単に説明すると、WEB制作の一部作業を自動化してくれる「gulp.js」が動作する環境が「Node.js」です。
この自動化の中に今回の目的である「Sass」が含まれます。

Node.jsをインストール


公式サイトから、最新版をダウンロードします。
後はインストーラーの指示に従えばインストール完了です。

コマンドラインを起動してインストール確認

Windows なら コマンドプロンプト
Mac なら ターミナル
を起動して、node -vと実行してインストールしたバージョンが表示されれば成功です。

設定ファイル(package.json)の作成

デスクトップなどにフォルダを作ります。
今回は「project」という名前のフォルダを作ったという前提で進めていきます。

Projectフォルダ内でコマンドラインを起動します。
Windows なら Shift + 右クリック でメニュー内に「コマンドプロンプト」または「PowerShell」で開くメニューを選択します。
Mac なら システム環境設定 → キーボード → ショートカット → サービスの「ファイルとフォルダ」内に「フォルダに新規ターミナル」という項目があるのでチェックを入れ、フォルダを右クリックすれば「フォルダに新規ターミナル」が選択できます。

Projectフォルダ内でコマンドラインを開いてnpm init -yを実行すると、「package.json」という設定ファイルが生成されます。
今後、このファイルに Node.js でインストールした情報が追記されていきます

gulp.js のインストール

引き続きProjectフォルダ内のコマンドラインでnpm install -D gulpを実行します。
これで gulp.js のインストールは完了です。

Sass のインストール

gulp で Sass を使用する場合、「gulp-sass」のプラグインを使用するのが一般的です。
npm install -D gulp gulp-sassを実行すると、インストール完了です。

この記事を書いた人
HISA

フロントエンドエンジニアを名乗っています。ゲーム大好き!「格闘ゲーム」や「デジタルカードゲーム」を好みます。大会にもチラホラ参加しています!

HISAをフォローする
ブログページに戻る