LoginSignup
6

More than 3 years have passed since last update.

nuxt.jsに導入したbulma.ioを独自の色でカスタマイズする。

Last updated at Posted at 2019-04-10

nuxt.jsにsassを導入する。

sassを利用する為にnode-sass および sass-loader パッケージをインストールする。

npm install --save-dev node-sass sass-loader

assets内にファイルを作成。

assets/css/main.scss
assets内にファイルを作成。

nuxt.config.jsに追記。

nuxt.config.js
css: [{ src: '~assets/css/main.scss', lang: 'scss' }],

scssファイルを編集。

先ほど作ったmain.scssファイルに以下を追記します。
公式ガイドを参考にnuxt.js用に編集(importの部分等)して追記します。
http://versions.bulma.io/0.7.0/documentation/overview/customize/

main.scss
// 1. Import the initial variables
@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 "../sass/utilities/derived-variables";
$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ファイルの@nuxtjs/bulmaをコメントアウトすることで上手く読み込みが出来ました!!

nuxt.config.js
/*
   ** Nuxt.js modules
   */
  modules: [
    // '@nuxtjs/bulma',
    '@nuxtjs/pwa'
  ],

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6