🖥️
Sassの自動コンパイルを任意の場所にアウトプットしたい。
ヘッダー
タイトル
フレームワークを使わず自分でSassを導入するときにコンパイルが煩わしく感じていました。
これまではVisual Studio Codeの拡張機能で自動コンパイルをしていたが、任意のディレクトリにアウトプットしたいとおもい調べた結果の記録です。
対象（何が知りたい人向けなのか）
- sassで効率的にcssを書きたい。
- コンパイルファイルのアウトプット先を自分で選択したい。
環境
- node インストール済み
- npm インストール済み
ゴール（この記事で何ができるか）
- CSSのアウトプット先を自分で選択できるようになる。
- 自動コンパイルの設定を自分でできるようになる。
手順（どうやって解決するか）
-
導入したいプロジェクトで
package.jsonを作成する。$ cd 導入したいプロジェクト # nodeのパッケージを初期化 $ npm init -
node-sassをインストールする。# nodeでsassを利用できるようにパッケージを追加。 $ npm install node-sass -
package.jsonの中でスクリプトを作成する。# 追記方法の見本 node-sass [options] <input> [output] Or: cat <input> | node-sass > output#sassの監視対象とアウトプット先を設定。 "scripts": { # scriptsの中に以下を追加する。 "sass": "node-sass src/sass/ --output src/css/ --output-style compressed --watch --source-map true" }オプション一覧
-w, --watch ディレクトリまたはファイルの監視 -r, --recursive ディレクトリやファイルを再帰的に監視する。 -o, --output ディレクトリの出力 -x, --omit-source-map-url 出力からソースマップURLのコメントを省略する。 -i, --indented-syntax 標準入力からのデータをsassコード（対scss）として扱います。 -q, --quiet エラー時以外のログ出力を抑制します。 -v, --version バージョン情報を出力します。 --output-style CSSの出力スタイル（入れ子｜展開｜コンパクト｜圧縮）を指定します。 --indent-type 出力する CSS のインデントの種類 (スペース | タブ) --indent-width インデントの幅: スペースまたはタブの数 (最大値: 10) --linefeed 改行スタイル (cr | crlf | lf | lfcr) --source-comments デバッグ情報を出力に含める。 -source-map ソースマップを出力します。ソースマップを出力する --source-map-contents インクルードコンテンツをマップに埋め込む --source-map-embed sourceMappingUrl をデータ URI として埋め込む。 --source-map-root ソースマップにそのまま出力されるベースパス。 --include-path インポートされたファイルを探すためのパス。 --follow シンボリックリンクされたディレクトリに従う --precision 10 進数で許容される精度の量 --error-bell エラー時にベル文字を出力します。 --importer カスタムインポーターを含む .js ファイルへのパス。 カスタム関数を含む .js ファイルへのパス --help 使用情報を表示します。 --help 使用情報を表示します。 -
コマンドを実行してエラーが出なければ自動コンパイルの設定完了。
# 以下コマンドで自動コンパイル開始。 $ npm run sass
気をつけること（よくある間違いなど）
package.jsonに追記するときにカンマが抜けていてsyntax error になることがあるので注意。
感想
詳細にオプションがあって覚えるのは大変そうですが、ヘルプコマンドで確認しながら編集にできるようにはなっておきたいです。
sass で css を書くとコンパイルでエラーを教えてくれるので デバッグが多少できるようになります。
また、ブラウザごとの差も考慮しながら生成してくれるので自力で書く量も省略出来ます。
普段はバックエンド担当でフロントの設定は触らないため新鮮に感じました。
Discussion