Nuxt.jsでUIフレームワーク内のSass変数を上書きして、コンポーネントでも使う

概要

Nuxt.jsでUIフレームワークを使ってるときにフレームワークの標準のカラーテーマを上書きして、上書きした値をSass変数にしてコンポーネント内で使いたい、なんてことありませんか？

今回はbootstrap-vueとbuefyを例にその方法を紹介したいと思います。

bootstrap-vue

bootstrap-vueが既にインストールされている前提で話します。
まだインストールしていない人はcreate-nuxt-appでbootstrap-vueを選ぶか、公式ドキュメントでインストール方法を調べましょう。

まずSassが使えるようにします。

npm i node-sass sass-loader

次にassets内にbootstrap-vue内の変数上書き用のSassファイルを作ります。上書きするためにここでbootstrapとbootstrap-vueのscssファイルをインポートします。

assets/style/_override.scss

$primary: red;

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

次にNuxt.jsを以下のように

nuxt.config.js

export default {
  css: ['@/assets/style/_override.scss'],

  modules: [
    'bootstrap-vue/nuxt',
  ],

  // _override.scssで既に読み込んでいるのでここはfalseにする
  bootstrapVue: {
    bootstrapCSS: false, // or `css`
    bootstrapVueCSS: false // or `bvCSS`
  },
}

これでbootstrap-vue内の$primaryがredになります。
variantプロップスでprimaryを選んだ場合も赤になります。

しかしこれではコンポーネント内のstyleブロックで$primaryを呼んだらエラーになります。

$primaryをグローバルにするためにもうひと工夫します。
先日書いたNuxt.jsでグローバルSass変数を使いたいんじゃを使うとうまくいきます。

とりあえず@nuxtjs/style-resourcesをインストールします。

npm
npm i @nuxtjs/style-resources

次にグローバルにしたいSass変数を記入します

assets/style/_variables.scss

$primary: red;

最終的にNuxt.config.jsが以下のようになります。

nuxt.config.js

export default {
  css: ['@/assets/style/_override.scss'],

  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/style-resources'
  ],

  // _override.scssで既に読み込んでいるのでここはfalseにする
  bootstrapVue: {
    bootstrapCSS: false, // or `css`
    bootstrapVueCSS: false // or `bvCSS`
  },

  styleResources: {
    scss: ['@/assets/style/_variables.scss']
  },
}

これで$primaryがグローバルになりました。

buefy

buefyもbootstrap-vueとほぼ同じです。
違うのは_override.scssとnuxt.config.jsです。
以下のようにします

assets/style/_override.scss

@import "~bulma/sass/utilities/_all";

$primary: red;

@import "~bulma";
@import "~buefy/src/scss/buefy";

nuxt.config.js

export default {
  css: ['@/assets/style/_override.scss'],

  modules: [
    'nuxt-buefy',
    '@nuxtjs/style-resources'
  ],

  // _override.scssで既に読み込んでいるのでここはfalseにする
  buefy: {
    css: false
  },

  styleResources: {
    scss: ['@/assets/style/_variables.scss']
  },
}

終わりに

他のUIフレームワークでは試したことがないのですが、ほぼ同じ手順で行ける気がします。
Vuetifyなんかはもう少し簡単かもしれません。
大事なのは上書きするためのSassとグローバルに適用するためのSassの２つを用意することです。
この問題で躓いている人の参考になればと思います。