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

サイト内検索

最近の投稿

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

アイキャッチ
chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。 割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるとい...

05 Aug 2018

アイキャッチ
はじめてのVim覚え書き

今回はエディターのご紹介になります。かなり特殊なVimエディターをご紹介したいと思います。便利なエディターAtom、SublimeText、VisualStudioCodeとは訳が違います。 ...

28 Jul 2018

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

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

17 Jul 2018

著者

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

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

タグクラウド

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