Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

以上です。

mnmemo
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした