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'
],