Node.jsアプリにSass導入

はじめに

生のCSSを書くよりも、Sassで書いたほうが良いらしい。
導入が想像よりも面倒だったので、備忘録として残す。
ざっくりとした理解で書いているので、誤解を生む表現もあるはず。
その点、ご注意ください。

ちなみに、本記事では、gulp.jsを使う方法を紹介する。

環境

• windows 10 home 64bit
• node.js 12.12.0
• gulp.js 4.0.2
  • バージョン3と4では仕様が異なるため注意！

Sassとは

CSSを便利に書くための言語みたいなもの。

SASS記法とSCSS記法の2種類がある。
SCSS記法のほうが、CSSの書き方に近い。
本記事では、SCSS記法で進める。

ざっくりとした使い方（？）としては、
1. Sassを使えるように、環境構築する。
2. CSSで記述したい部分をSassで書く。
3. SassをCSSにコンパイルする。（.sassまたは.scssファイルを、.cssファイルに変換する。）

Node.jsアプリケーションでSassを使うには

Sassを自動コンパイルしてくれるgulp.jsを使うのが、調べてみたところ無難そう。
コンパイルが自動化されることで、Sassを書くだけで済む！
自分でCSSに変換する必要なくなる！

おおまかな流れとしては、
1. node.jsアプリ作成
2. そのアプリにディレクトリ移動
3. gulp.jsをローカルインストール
4. gulpfile.jsファイルを作成＆必要な情報の記述
5. package.jsonの記述
6. 開発開始！

Sass導入

Node.jsアプリケーションの作成

適当にNode.jsのアプリケーションを作成。

command

mkdir hoge_node_sass
cd hoge_node_sass
npm init

gulp.jsをインストール

command

npm install gulp --save-dev
npm install gulp-sass --save-dev

--save-devにしている理由は、gulpもSassも開発時にしか使わないため。
公開時には、コンパイルされたCSSが適用されるため、gulpもSassも不要。

ちなみに、グローバルインストールするとgulpコマンドが使えて便利だが、インストールするものはプロジェクトごとに管理したほうが良いらしいので、ローカルインストールがオススメ。

gulpfile.jsの作成

gulpfile.jsを同ディレクトリに作成。

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')

// sassの読み込み先とcssの保存先指定
const hoge = () => {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css/'))
}

// 自動監視のタスク、sassWatchって名前にする
const sassWatch = () => {
  const watcher = gulp.watch(['./sass/**/*.scss'])
  watcher.on('change', hoge)
}

// sassWatchをデフォルトのタスクに設定
exports.build = sassWatch
exports.default = gulp.series(sassWatch)

package.json記述

"scripts"に"gulp": "gulp"を追加。
これにより、コマンドプロンプトからnpm run gulpと打つことで、gulpfile.jsの処理を実行できる。

package.json

"scripts": {
  "gulp": "gulp"
}

ディレクトリ構成

さいごに、ディレクトリ構成を載せておく。

ディレクトリ構成

├ css
  ├   // コンパイル後のCSSが自動で追加される
├ sass
  ├ hoge.scss  // コンパイル前のSCSS（またはSASS）
├ gulpfile.js
├ index.html
├ package.json

開発開始

gulpを実行して監視モードにすれば、準備完了！
Sassでの開発開始！

command

npm run gulp

追加しておくと便利な機能

command

# ベンダープレフィックス
npm install gulp-autoprefixer --save-dev

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const autoprefixer = require('gulp-autoprefixer') // 追記

const hoge = () => {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(autoprefixer()) // 追記
    .pipe(gulp.dest('./css/'))
}

const sassWatch = () => {
  const watcher = gulp.watch(['./sass/**/*.scss'])
  watcher.on('change', hoge)
}

exports.build = sassWatch
exports.default = gulp.series(sassWatch)

さいごに

書いてるうちにSassというよりもgulpの説明がメインになってた気がする…
間違いやご指摘などあれば、コメントよろしくお願いします。

参考サイト

• https://gulpjs.com/
  • gulp.js公式
• https://liginc.co.jp/web/tutorial/117900
  • v3系の内容だが、gulpによるSassの自動コンパイルについてわかりやすい記事
• https://qiita.com/M_amourr/items/09c8bb4e2b2981cafe7a
  • 同じくv3系の内容だがわかりやすい記事
• https://qiita.com/Michinosuke/items/11908fd276d1794aedeb
  • v4系の内容で、シンプルにまとまっていて参考になる記事