Nuxt.jsにBulmaを導入して変数を使ったカスタマイズを行う

以下のサイトを参考に導入します。

Using Bulma and Font Awsome with NUXT
http://bgraphic.no/using-bulma-font-awsome-nuxt/

@nuxtjs/bulmaを使うと簡単に導入できますが、変数を使ったカスタマイズを行いたいので@nuxtjs/bulmaを使わずに上記のサイトの方法で導入します。

以下は上記のサイトからFont Awsome部分を省いた導入方法

##Bulmaを導入する
まずはBulmaを導入する手順

1. npm install bulma --save
2. npm install sass-loader node-sass --save-dev
3. Add a css block to your nuxt.config.js:

yarnを使っているならば

1. yarn add bulma
2. yarn add sass-loader node-sass --dev
3. Add a css block to your nuxt.config.js:

nuxt.config.js にcss設定を追記。

nuxt.config.js

module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: 'bulma/bulma.sass', lang: 'sass' }
  ]
}

##カスタマイズできるようにする
Bulmaが導入できたのでassetsディレクトリにカスタマイズ用の main.scss を作成して以下を記述します。

ソースはBulmaのカスタマイズ方法が書いてあるページから取ってきました。

Customizing with Sass
https://bulma.io/documentation/overview/customize/

assets/main.scss

// 1. Import the initial variables
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;

// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);

// 5. Add new color variables to the color map.
@import "../sass/utilities/derived-variables.sass";
$addColors: (
  "twitter":($twitter, $twitter-invert),
  "linkedin": ($linkedin, $linkedin-invert),
  "github": ($github, $github-invert)
);
$colors: map-merge($colors, $addColors);

// 6. Import the rest of Bulma
@import "../bulma";

@importのパスをNuxt.js用に書き換えます。

assets/main.scss

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;

// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);

// 5. Add new color variables to the color map.
@import "~bulma/sass/utilities/derived-variables.sass";
$addColors: (
  "twitter":($twitter, $twitter-invert),
  "linkedin": ($linkedin, $linkedin-invert),
  "github": ($github, $github-invert)
);
$colors: map-merge($colors, $addColors);

// 6. Import the rest of Bulma
@import "~bulma/bulma";

nuxt.config.jsのcss設定を変更する。

nuxt.config.js

module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: '~assets/main.scss', lang: 'scss' }
    // { src: 'bulma/bulma.sass', lang: 'sass' }
  ]
}

##warningが表示されないようにする方法
0.5.2から導入されたvariable gap columns機能に関連してコンパイル時にwarningが出るので
これが表示されないようにする。

###方法1（0.6.1以降で使える方法）
実験的な機能であるvariable gap columnsに関するwarningなので、この機能を無効にしてしまう。
$variable-columns: false;を@import "~bulma/bulma";の前に追記する。

assets/main.scss

$variable-columns: false;
@import "~bulma/bulma";
}

参考 https://github.com/jgthms/bulma/issues/1190

###方法2

postcss-custom-propertiesのwarningが表示されないようにする。
buildに以下を追記する。

nuxt.config.js

  build: {
    postcss: {
      plugins: {
        'postcss-custom-properties': {
          warnings: false
        }
      }
    },
  },

参考 https://github.com/nuxt/nuxt.js/issues/1670

以上です。