webpackを使ってnode-sass環境にbourbon3兄弟を導入する

Bourbon - A Lightweight Sass Tool Set
Bourbon Neat
Bitters - Predefined Styles for Bourbon

Ruby/Railsを使わないJavaScriptプロジェクトでもbourbonを導入したなと思って調べたら、公式でnpm packageも用意されていることがわかったので導入した際の備忘録です。

bourbonとneatを導入

npm i -D bourbon bourbon-neat

sass-loaderを使ってnode-sassにpathを渡す

webpack.config.js

const bourbonPath = require('bourbon').includePaths;
const neatPath = require('bourbon-neat').includePaths;

...
 module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css?minimize!postcss!sass'),
      },
    ],
  },

  // sass-loaderのオプションでbourbonとneatのpathを渡す
  sassLoader: {
    includePaths: bourbonPath.concat(neatPath),
  },
...

bittersを導入

gem install bitters

cssを管理するdirectoryのrootでbitters installするとファイルが生成される。

bittersを最新のものにupdateして導入したせいか、_variables.scssの6行目にある$base-font-family: $font-stack-system;の$font-stack-systemという変数がどこにも定義されていないためコンパイルエラーが発生するので適当なfont-familyを指定してあげるかbittersのversionを下げてあげたほうがいいかもしれない。(ちゃんと調べてない)

$base-font-family: sans-serif;