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

サイト内検索

最近の投稿

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

アイキャッチ
macOS Mojaveを早速インストールしてみた感想

さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。 入れてみてすぐに感じた感想は重い。。。もっさり感が半...

24 Oct 2018

アイキャッチ
ムーバブルタイム(MT)からワードプレスのインポート

今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを...

23 Oct 2018

著者

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

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

タグクラウド

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