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

超絶・超速の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

参考になれば幸いです。


∞Tadashi Suyama∞

node sass scss js
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

node sass scss js
フッターイメージ