モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

nuxt.js で scss のグローバルな変数を使用する

nuxt.js で開発するとき、自分で定義した scss の変数や mixinをどのコンポーネントからでもグローバルに使えるようにしたい、というメモ

まずは共通のファイルを、/assets/styles/_var.scss あたりに作り、その中で各種変数などを定義しておきます。

// assets/styles/_var.scss

$theme-color: #ccc;

これらを呼び出す方法は2つあって、

毎回 import する

必要なタイミングで、この _var.scss を import すればよいですね

// components/sample.vue

<style lang="scss">
@import "assets/styles/var";

.title {
    color: $theme-color;
}
</style>

こんな風に使いたいところで importしてあげれば、まあそりゃ当然だろという感じですが、変数等が使えます

あ、sass-loadernode-sass はインストールしておいてください

yarn add --dev sass-loader node-sass

@nuxtjs/style-resources を使う

毎回書くのはめんどくさいので、このモジュールを使う方法が楽ですね。

github.com

まずはモジュールをインストール。

yarn add --dev @nuxtjs/style-resources

んで、nuxt.config.js に設定を追記します

export default {
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: [
      '~assets/styles/_var.scss'
    ]
  },
}

module として @nuxtjs/style-resources を使い、常に読み込ませる scss ファイルを styleResources として指定しておく、という設定になります。

こうすると nuxt.js のどこからでも、自分で定義した変数や mixin が呼び出せるようになるかんじです。

ちなみに、以前は nuxt-sass-resources-loader というモジュールを使っていましたが、そちらは現在はサポートが終わっているっぽいので要注意。

github.com