Edited at

Nuxt.jsでグローバル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']
},
}