Edited at

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

以上です。