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;

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
5
Help us understand the problem. What are the problem?