Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
80
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

以上です。

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
80
Help us understand the problem. What are the problem?