[Vue.js] Nuxt3에서 Less 전역으로 적용하기 / 변수 전역으로 사용하기

Nuxt3 프로젝트를 신규로 구축하면서 색상 등을 정의해 놓은 공통 Less 파일을 전역으로 설정하고 싶었다.

Nuxt 공식 문서와 구글 검색을 통해 적용하다 보니 적용이 되었다!

이제 각 SFC 스타일 마다 import를 하지 않아도 Less 공통 변수를 불러서 사용이 가능해졌다.

export default defineNuxtConfig({
  ...
  vite: {
    css: {
      preprocessorOptions: {
        less: {
          additionalData: '@import "~/assets/less/common.less";',
        },
      },
    },
  },
});

 

 

Reference

• https://nuxt.com/docs/getting-started/assets#global-styles-imports
• https://github.com/vuejs-templates/webpack/issues/411#issuecomment-762757231