Zenn
📝

【Nuxt3】Nuxt3にSCSSを導入する

2023/04/12に公開
JavaScript
Sass
TypeScript
Nuxt 3
tech

フォルダ構成

.
├ assets
│└ styles
│　├ main.scss
│　└ _variables.scss
├ app.vue
└ nuxt.config.ts

コマンド

Nuxt 3は軽量化のために、必要最小限のファイルで起動できるようになっています。そのため、初期状態でSCSSは動くようにはなっていないので、自分で設定が必要です。

npm install sass --save-dev
または
npm i sass -D

nuxt.config.tsに設定を追加

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  // 使用するscssファイルを指定
  css: ["@/assets/styles/main.scss"],
  // Viteのビルドの際に、SCSSのパーシャルファイルを読み込むよう指定する
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/styles/_variables.scss";',
        },
      },
    },
  },
});

参考

Nuxt 3でSCSSを使う方法（Nuxt 3 RC4）

Discussion