5
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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;
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
5
Help us understand the problem. What are the problem?