超絶・超速のnode-sassでsassコンパイルのすすめ

2018-05-12 最終更新日:2018-05-12

さて今回はsassを取り上げてみます。sassといったらcompassが出てくるほど有名ですが、すでに開発終了してから4年以上たっているわけでしてしかもコンパイラとしての機能しか使っておらず、他にいろいろ調べたらlibsassというライブラリがありsassをC・C++で実装したものということです。

Node、Ruby、Go、Python等の言語からも使えるようでしてnodeなら必ず入れるのでnodeで提供しているnode-sassを入れることにしました。nodeとnpmはセットなのでpackage.jsonのscriptsに記載して運営する方法をご紹介いたします。

gulpとかもありますがいろいろ入れたりするのが面倒なのでpackage.jsonだけで使う方法です。とてもシンプルで使いやすいですのでおすすめな方法です。

node-sass導入方法

node-sass

node,npmは入っている状態での方法になります。

必要なパッケージを入れます。ローカルに入れるのが面倒なのですべてグローバルにしていれます。

$ sudo npm install node-sass postcss postcss-cli autoprefixer nodemon -g

ターミナルで上記インストールして以下package.jsonです。同一階層に_sassフォルダがあってコンパイル先はcommon/cssに入れるように設定してあります。devDependenciesに記載してありますがグローバルに入っているのでなくても良いですがローカルで使う際に必要になりますので一応記載してあります。browserslistはautoprefixerで対象になるブラウザを記載してあります。

{
  "name": "node-sass",
  "version": "1.0.0",
  "description": "node-sass",
  "private": true,
  "web": "http://www.its-office.jp/",
  "main": "sass",
  "scripts": {
    "sass": "npm run build-css && npm run autoprefixer",
    "sass-w": "npm run watch-css & npm run watch-autoprefixer",
    "cssmin": "npm run release-css && npm run autoprefixer",
    "build-css": "node-sass --include-path scss _sass/styles.scss common/css/styles.css --output-style expanded --indent-type tab --indent-width 1 --source-comments",
    "release-css":"node-sass --include-path scss _sass/styles.scss common/css/styles.css --output-style compressed",
    "watch-css": "nodemon -e scss -x \"npm run build-css \"",
    "autoprefixer": "postcss --use autoprefixer --no-map -o common/css/styles.css common/css/styles.css",
    "watch-autoprefixer": "nodemon -e scss -x \"npm run autoprefixer \"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ITS",
  "license": "MIT",
  "devDependencies": {
   "node-sass": "^4.9.0",
    "nodemon": "^1.17.4",
    "autoprefixer": "^8.4.1",
    "node-sass-import": "^2.0.1",
    "postcss": "^6.0.22",
    "postcss-cli": "^5.0.0"
  },
  "browserslist": [
    "last 2 versions",
    "not ie < 11",
    "Android >= 4",
    "iOS >= 10"
  ]
}

autoprefixerでブラウザの対象バージョン確認する方法は以下の通りです。

$ npx autoprefixer --info

以下のように表示されます。

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: 65, 64
  Edge: 16, 15
  Firefox: 59, 58
  IE: 11
  IE Mobile: 11, 10
  iOS: 11.3, 11.0-11.2, 10.3, 10.0-10.2
  Opera Mini: all
  Opera Mobile: 37, 12.1
  Opera: 50, 49
  Safari: 11.1, 11
  Samsung: 6.2, 5

コンパイル方法は以下の通りに実行

$ npm run sass

でコンパイル＆autoprefixerしてくれます。

$ npm run sass-w

でコンパイル監視＆autoprefixer監視してくれます。

$ npm run cssmin

で圧縮cssができあがります。これは簡単でいいですね。プロジェクトに使うときにこのファイルがあればsass環境がサクッと作れちゃいます。いいですね。

node-sassのオプションはこちらを見ていただく方が早いですね。いろいろとできます。

node-sassインストール失敗したとき

node-sassのインストールでgyp ERR! configure errorが出たら以下でインストールできました。

$ sudo npm install -g node-gyp
$ sudo npm config set user 0
$ sudo npm config set unsafe-perm true

参考になれば幸いです。

Node.js超入門

posted with ヨメレバ

掌田津耶乃秀和システム 2017年08月04日

Amazonで購入

楽天ブックスで購入

∞Tadashi Suyama∞

node sass scss js