Meteor で Sass/SCSS を使用する

Meteor で Sass/SCSS を使用したくなることがありますよね。ありませんか。Stylus 使いますかそうですか。

Sass/SCSS パッケージの追加

Meteor パッケージリストで sass を検索すると、いくつかパッケージが見つかりますが、今回は一番スターが付いている fourseven:scss パッケージを Meteor プロジェクトに追加します。

bash$

meteor add fourseven:scss

あとは CSS を Sass/SCSS に書き換え、拡張子に .sass / .scss をつけるだけです。簡単ですね。

コンフィグレーション(オプション)

Meteor プロジェクトのルートに scss.json というファイルを用意すると設定をカスタマイズすることができます。なお scss.json を編集後は meteor サーバーの再起動が必要となります。

インクルードパスの追加(includePaths)

CSS の探索パスを追加します。

METEOR_PROJECT_ROOT/scss.json

{
  "includePaths": [
    ".meteor/local/bower",
    ".meteor/local/bower/node-bourbon/assets/stylesheets",
    ".meteor/local/bower/neat/app/assets/stylesheets"
  ]
}

Source Map の無効化

デフォルトでは Source Map を出力する設定になっています。
これを無効にしたい時は、以下のオプションを scss.json に追加します。

METEOR_PROJECT_ROOT/scss.json

{
  "sourceMap": false
}

Autoprefixer の有効化

CSS のベンダープレフィックスを自動でつけてくれるAutoprefixer が標準でついているみたいです。
以下の設定を scss.json 追加することで Autoprefixer を有効化することができます。

METEOR_PROJECT_ROOT/scss.json

{
  "enableAutoprefixer": true,
  "autoprefixerOptions": {
      "browsers": ["> 1%"],
      "cascade": false
  }
}

参考

• https://atmospherejs.com/fourseven/scss