node-sassをつかってscssをcssにコンパイルする

自分の関わった過去のプロジェクトを見返すと、grantを使っていたり、gulpをつかっていたり、webpackを使っていたりして、ウェブフロントエンドの開発環境の移り変わりの早さを感じます。

正直最近は環境構築が面倒なので、JavaScriptもHTMLも生で書いてしまうことが多いのですが、唯一SCSSのみは使い続けてまして、そして最近、過去のプロジェクトを再編集しようと思ったところ、「そういえば新しいPCにSassを入れてなかったな」と気づきました。

kimizuka.hatenablog.com

昔（2014年）の僕は、gemでsassを導入していましたが、これから入れるのはものすごく今更感がありますし、プロジェクトを引き継ぐ時に後任にも「Rubyとsassを入れてから開発してね」と言っておかないといけなくなるので、node-sassを導入することにしました。package.jsonに記載しておけば引き継ぎも用意ですし。

kimizuka.hatenablog.com

導入方法

npm install node-sass --save-dev

watch方法

package.jsonと同じ階層に_scssフォルダとpublicフォルダを置き、index.cssをwatchで書き出したい場合は、

node-sass --include-path _scss _scss/index.scss public/css/index.css -w

こんな感じ、

更に圧縮までしたいなら、

node-sass --include-path _scss _scss/index.scss public/css/index.css -w --output-style compressed

これをpackage.jsonのscriptsに、

"scripts": {
    "start": "node-sass --include-path _scss _scss/index.scss public/data/css/index.css -w --output-style compressed"
  }

という感じで書いておけば、

npm start

でscssファイルを監視し、変更があった際にCSSファイルを書き出してくれます。