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;