[Nuxt3]外部SCSSを自動的にロードする方法

Nuxt3で、各コンポーネントのCSS(<style>)から、外部SCSSファイルで宣言した変数などを参照する場合、毎回、各コンポーネントからimport記述するのは面倒くさいです。プロジェクト全体で自動的に読み込む方法をまとめます。

ロードしたい外部SCSS

assets/styles/variables.scss

$text-color: #001f3f;

ここでは、$text-colorという変数に、色を代入して、各コンポーネントから共有できるにします。

vite.config.ts

次に、viteのvite.config.tsに以下の様な設定をします。

vite.config.ts

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "${resolve(__dirname, 'assets/styles/variables.scss')}";`
      }
    }
  }
})

各コンポーネントから参照

@import 'assets/styles/variables.scss';

という様なimportをしなくても、以下の記述だけで変数を参照できる。

myComponent.vue

<style lang="scss" scoped>
a {
  color: $text-color;
}