Edited at

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の2つを用意することです。

この問題で躓いている人の参考になればと思います。