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

サイト内検索

最近の投稿

アイキャッチ
リニューアルした水木しげるロードは夜がおすすめ

さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置...

17 Jul 2018

アイキャッチ
flexboxで簡単レイアウト

Flexbox(Flexible Box Layout Module)とは今時のレスポンシブに対応したレイアウトスタイルです。上下中央の配置や等間隔の配置、固定幅と可変幅の配置など使い方は様々、...

07 Jul 2018

アイキャッチ
ダウンモニターアプリのご紹介

今回はウェブサイトの監視アプリのご紹介です。以下からダウンロードできます。 * [Free Website Monitor](https://play.google.com/store/app...

30 Jun 2018

アイキャッチ
出雲日御碕灯台が思った以上に良かったのでご紹介

ここ最近は天気も良いので出雲日御碕(いずもひのみさき)神社に行ってみました。 出雲大社から約10kmぐらい先にあります。海沿いを車で15分ぐらい山道を進むと神社につきます。ほぼ一本道なので迷う...

25 Jun 2018

アイキャッチ
bootstrap4でのtable-responsiveをレスポンシブにする

最近はCSSフレームワークはBootstrap3からBootstrap4をメインにして作業しております。かなり使いやすいです。ほぼこのフレームワークだけで完結できる仕様になってきました。 さて...

16 Jun 2018

著者

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

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

タグクラウド

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