こんにちは、Okadaです。
nuxt3がベータ版から正式版になったということで最近より一層nuxtについて勉強をしています。

今回は、SCSSの変数などをグローバルに使用する方法をご紹介していきます。

nuxt.config.ts

nuxt3からviteが採用されているので、基本的にはvite設定に沿って行っていきます。
nuxt.config.tsに以下のような形で記述をします。

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/css/setting.scss";',
        },
      },
    },
  },

基本的にはこちらでグローバルで変数が使用可能になります。
今回は、コンポーネントにmixinを使用しました。

component.vue

■style

.ly-header__inner {
  padding: 2.4rem 2rem;
  @include mq(md) {
    padding: 2rem 1.6rem;
  }
}

オススメNuxt記事

propsで真偽値を渡して、分岐させる方法[nuxt3]
microcmsを導入する[nuxt3]
ナビゲーションガードについて[nuxt3]