1分でできるnode-sassとautoprefixerを使用したSCSSコンパイル方法

node-sassとautoprefixerでコンパイル

昔はSASSのコンパイルにはCompassを使用することが多かったが、現在では新しいプロジェクトであればnode-sassとautoprefixerを使用するのが一般的だ。

node-sassはRubyを使用したCompassよりも処理速度が速く、さらにautoprefixerを使用すればCSSのベンダープレフィックスが自動で付与されるためコーディングの手間が激減する。

Yarnを使用すればすぐに環境構築可能

node-sassとautoprefixerの環境構築は難しそうに思えるが、Yarnを使用すれば1分でできる。

Yarnがインストールされていない場合はあらかじめインストールしておく。

$ yarn -vでバージョンが出なければインストールされていない。

インストール | Yarn

node-sassとautoprefixer環境構築手順

まずこちらのpackage.jsonの入ったZIPをダウンロードする。

package.jsonの中身はこのようになっている。

{
  "name": "CSS_compile",
  "version": "1.0.0",
  "license": "MIT",
  "author": "iwbjp",
  "scripts": {
    "start": "yarn build-css && yarn autoprefixer",
    "build-css": "node-sass --include-path scss scss/style.scss css/style.css --output-style compressed",
    "autoprefixer": "postcss --use autoprefixer --no-map css/style.css -d css/"
  },
  "dependencies": {
    "autoprefixer": "^7.2.6",
    "node-sass": "^4.7.2",
    "node-sass-import": "^1.1.1",
    "postcss": "^6.0.17",
    "postcss-cli": "^5.0.0"
  },
  "browserslist": [
    "last 2 versions",
    "not ie < 11",
    "Android >= 4",
    "iOS >= 9"
  ]
}

ダウンロードが完了したらpackage.jsonのファイルのあるディレクトリにcdで移動して、yarn installでnode-sassなどをインストールしたあとyarn startでコンパイルできる。

$ yarn install
yarn install v1.3.2
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 15.39s.
$ yarn start
yarn run v1.3.2
$ yarn build-css && yarn autoprefixer
$ node-sass --include-path scss scss/style.scss css/style.css --output-style compressed
Rendering Complete, saving .css file...
Wrote CSS to /Users/iwbjp/Downloads/node-sass-autoprefixer/css/style.css
$ postcss --use autoprefixer --no-map css/style.css -d css/
✨  Done in 3.04s.

autoprefixのベンダープレフィックスのブラウザの種類やバージョンはpackage.jsonに記述してある。

現在のほとんどのサイトはブラウザ推奨環境が最新版Chrome, Firefox, Microsoft Edge, IE11, Android 4以上, iOS 9以上なので、大抵のケースの場合はこの設定で問題ない。(不必要に対応範囲を広げるとCSSファイルサイズが無駄に大きくなる)

"browserslist": [
  "last 2 versions",
  "not ie < 11",
  "Android >= 4",
  "iOS >= 9"
]

スマートフォン専用のWebサイト(ブラウザゲーム)であればAndroidおよびiOSの対応だけで良いため下記のようになる。

"browserslist": [
  "Android >= 4",
  "iOS >= 9"
]

$ yarn autoprefixer-infoを実行すると…

browserslistの対象ブラウザ・バージョン一覧が表示される。

$ yarn autoprefixer-info
yarn run v1.3.2
Browsers:
  Chrome for Android: 64
  Firefox for Android: 57
  And_qq: 1.2
  UC for Android: 11.8
  Android: 62, 4.4.3-4.4.4, 4.4, 4.2-4.3, 4.1, 4
  Baidu: 7.12
  Bb: 10, 7
  Chrome: 64, 63
  Edge: 16, 15
  Firefox: 58, 57
  IE: 11
  IE Mobile: 11, 10
  iOS: 11.0-11.2, 10.3, 10.0-10.2, 9.3, 9.0-9.2
  Opera Mini: all
  Opera Mobile: 37, 12.1
  Opera: 50, 49
  Safari: 11, 10.1
  Samsung: 6.2, 5
カテゴリーcss