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-loader
と node-sass
はインストールしておいてください
yarn add --dev sass-loader node-sass
@nuxtjs/style-resources を使う
毎回書くのはめんどくさいので、このモジュールを使う方法が楽ですね。
まずはモジュールをインストール。
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
というモジュールを使っていましたが、そちらは現在はサポートが終わっているっぽいので要注意。