Nuxt.jsでSCSSを使うとき、グローバルの変数を使う

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

依存ライブラリの追加

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 などの変数が使えるようになります。