느린 개발자

 

Nuxt3 Vuetify settings.scss 설정 에러 

 

Nuxt3 v3.9.3

vuetify v3.5.1

 

Nuxt3에서 vuetify 설치하고 settings.scss로 variables 설정을 아래처럼 진행했는데

//nuxt.config.ts

import vuetify from 'vite-plugin-vuetify'
import { createResolver } from '@nuxt/kit'

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.min.css',
  ],
  build: {
    transpile: ['vuetify'],
  },
  hooks: {
    'vite:extendConfig': (config) => {
      config.plugins.push(
        vuetify({
          styles: { configFile: resolve('./settings.scss') },
        })
      )
    }
  }
})

 

 

적용은 되는데 아래 에러가 계속 나와서.. 해결방법을 검색했더니

No match found for location with path "/_nuxt/%EF%BF%BDplugin-vuetify:components/VMain/VMain.sass"

 

 

정확한 해결방법은 없고, 다른 분들은 임시 해결 방법으로 사용하고 있었습니다.  정확한 문제는 저도 조금 더 찾아봐야겠지만 저는 vuetify 제로구성 모듈을 사용하여 해결했습니다.

Build and dev mode are slow and got errors in logs when importing Vuetify 3 with Vite-plugin-vuetify · Issue #15412 · nuxt/nux

 

 

Vuetify Nuxt module 설치

• 먼저 기존에 설정했던 vite-plugin-vuetify를 제거합니다. npm uninstall vite-plugin-vuetify
• plugins/vuetify.ts 파일 또한 제거합니다.
• nuxt.config.ts에 vite-plugin-vuetify로 설정했던 것도 제거합니다.

npm install -D vuetify-nuxt-module

yarn add -D vuetify-nuxt-module

pnpm add -D vuetify-nuxt-module

 

 

Vuetify Nuxt module 설정

nuxt.config.ts에서 설정만 하면 완료입니다. 제 프로젝트에 사용하는 설정입니다. 저도 기본설정만 했습니다.

export default defineNuxtConfig({
  ssr: true,
  devtools: { enabled: true },
  css: [],
  modules: ['vuetify-nuxt-module'], //설정
  vite: {
    define: {
      'process.env.DEBUG': false
    }
  },
  vuetify: {  //설정
    moduleOptions: {
      /* module specific options */
      styles: { configFile: './settings.scss' }
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  },
  features: {  //설정
    inlineStyles: false
  },
  vue: {
    runtimeCompiler: true
  },
  sourcemap: {
    server: false,
    client: false
  },
  build: {
    transpile: ['vuetify']
  }
})

 

 

공식문서에 ssr일 때 configFile 모듈 옵션 사용방법에 대한 설정방법이 있는데 그에 대한 설명입니다.

모듈 옵션을 통해 Vuetify SASS를 사용자 정의하는 경우 Nuxt 구성 파일에서 features.inlineStyles( experimental.inlineSSRStyles이전 Nuxt 버전의 경우) 답변해야 합니다 3.9.0. 그렇지 않으면 제작할 때 오류가 발생합니다.

 

// Nuxt config file
export default defineNuxtConfig({
  ssr: true,
  modules: ['vuetify-nuxt-module'],
  vuetify: {
    moduleOptions: {
      /* other module options */
      styles: { configFile: '/settings.scss' }
    },
    vuetifyOptions: {
      /* vuetify options */
    }
  },
  /* For Nuxt 3.9.0+ */
  features: {
    inlineStyles: false
  },
  /* For Nuxt prior to 3.9.0
  experimental: {
    inlineSSRStyles: false
  }
  */
})

 

 

 

settings.scss에서 버튼 색상만 설정해서 작동해보니 아래처럼 잘 나옵니다. 물론 위에 에러메시지 또한 없어져서 이대로 모듈을 사용해서 진행하면 될거같습니다.

/*settings.scss*/

@use 'vuetify/settings' with (
  $button-color: red,
  $button-font-weight: 700
);

 

 

나머지 테마 및 로케일등 설정은 아래 공식문서를 통해 필요한 부분 설정하시면 될거같습니다.

Vuetify Nuxt Module