🖥️

Sassの自動コンパイルを任意の場所にアウトプットしたい。

2 min read

ヘッダー

Untitled

タイトル(何についてかかれているか)

フレームワークを使わず自分でSassを導入するときにコンパイルが煩わしかった。

これまではVisual Studio Codeの拡張機能で自動コンパイルをしていたが、任意のディレクトリにアウトプットしたいとおもい調べた。

対象(何が知りたい人向けなのか)

  • sassで効率的にcssを書きたい。
  • コンパイルファイルのアウトプット先を自分で選択したい。

環境

  • node インストール済み
  • npm インストール済み

ゴール(この記事で何ができるか)

  • CSSのアウトプット先を自分で選択できるようになる。
  • 自動コンパイルの設定を自分でできるようになる。

手順(どうやって解決するか)

  1. 導入したいプロジェクトでpackage.jsonを作成する。

    $ cd 導入したいプロジェクト
    
    # nodeのパッケージを初期化
    $ npm init 
    
  2. node-sassをインストールする。

    # nodeでsassを利用できるようにパッケージを追加。
    $ npm install node-sass
    
  3. 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 使用情報を表示します。
    
  4. コマンドを実行してエラーが出なければ自動コンパイルの設定完了。

    # 以下コマンドで自動コンパイル開始。
    $ npm run sass
    

気をつけること(よくある間違いなど)

package.jsonに追記するときにカンマが抜けていてsyntax error になることがあるので注意。

感想

sassを導入することはcssのコーディングが効率的になるだけではなくいろんなメリットがあるなぁと考えた。

  • コンパイルを実行することでエラーログを出力してデバッグすることができる。(CSSではエラートグが出ないのでなぜ適用されないか考えることに苦労していました。)
  • コンパイルするときにブラウザを考慮したCSSを追加してくれる。IEなどに配慮して考えることが減る。
  • 変数を使って配色の管理をすることが思っていたより快適。bootstrapで管理してくれていた便利さを改めて再認識した。

参考リンク

node-sass

Discussion

ログインするとコメントできます