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 というモジュールを使っていましたが、そちらは現在はサポートが終わっているっぽいので要注意。
