Nuxt.jsでSCSSを使うとき、グローバルの変数を使う
create: 2019-11-1
Nuxt.js Vue.js Buefy Bulma

コンポーネントやページでいちいち変数ファイルの依存を追加するのが面倒なので。
どこでも使えるように設定します。

依存ライブラリの追加

yarn add -D @nuxtjs/style-resources

変数定義 SCSS の用意

今回は~/assets/css/variables.scssに作成しました。

// Import Bulma's core
@import '~bulma/sass/utilities/_all';

$primary: #10abd0;
$primary-invert: findColorInvert($primary);
$twitter: #4099ff;
$twitter-invert: findColorInvert($twitter);

// 以下続く。。。

nuxt.config.js の編集

使用モジュール、設定をそれぞれ追加します。

// nuxt.config.js
export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: ['~/assets/css/variables.scss']
  }
}

以上でページやコンポーネント側で何も書かなくても$primary などの変数が使えるようになります。