Vue3, Vite [sass] Undefined variable. [sass] @use rules must be written before any other rules. 에러 해결

글로벌 스타일 변수를 정의하기 위해

src/assets/styles 폴더 하위에 다음과 같이 파일 3개를 만들었다.

 

- color.scss

- font.scss

- main.scss

 

 

color.scss와 font.scss를 main.scss파일에서 불러오는 구조로 작성하였다.

/* mian.scss */

@import "./color.scss";
@import "./font.scss";


* {
    margin: 0;
    padding: 0;

    color : royalblue;
}

/* color.scss */

// COLOR WHITE
$color-white-000: #ffffff;
$color-white-100: #fafbfb;

// COLOR BLUE
$color-blue-000 : #1661a9;

// COLOR BLACK
$color-black-900: #000000;

/* font.scss */

@font-face {
    font-family: 'MBC1961GulimM';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/MBC1961GulimM.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

 

그리고 vite.config.ts 파일에서 아래와 같이

 css.preprocessorOpstions를 추가하였다.

// Plugins
import vue from "@vitejs/plugin-vue";
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
import ViteFonts from "unplugin-fonts/vite";

// Utilities
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "node:url";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true,
      styles: {
        configFile: "src/styles/settings.scss",
      },
    }),
    ViteFonts({
      google: {
        families: [
          {
            name: "Roboto",
            styles: "wght@100;300;400;500;700;900",
          },
        ],
      },
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/styles/main.scss";`,
      },
    },
  },
  define: { "process.env": {} },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "@apis": fileURLToPath(new URL("./src/apis", import.meta.url)),
      "@assets": fileURLToPath(new URL("./src/assets", import.meta.url)),
      "@components": fileURLToPath(
        new URL("./src/components", import.meta.url)
      ),
      "@pages": fileURLToPath(new URL("./src/pages", import.meta.url)),
      "@router": fileURLToPath(new URL("./src/router", import.meta.url)),
      "@store": fileURLToPath(new URL("./src/store", import.meta.url)),
    },
    extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
  },
  server: {
    port: 3000,
  },
});

 

main.scss파일을 불러오기 위해 vite.config.ts 파일에서 `@use "@/assets/styles/main.scss";` 이렇게 작성하고

src/pages/index.vue에서 color.scss에서 정의한 변수를 다음과 같이 사용했다.

// src/pages/index.vue

<template>
  <div class="page">INDEX.VUE 페이지</div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.page {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100vh;

  background-color: $color-black-900; //color.scss에서 정의한 변수 사용
}
</style>

 

그랬더니 다음과 같이 첫 번째 에러가 발생했다.

[sass] Undefined variable.

 

 

vite.config.ts 파일에서 use 대신 import로 수정했더니 두 번째 또 다른 에러가 발생했다.

`@import "@/assets/styles/main.scss";` 

[sass] @use rules must be written before any other rules.

 

 

# 해결 방법

아래 방법으로 문제를 해결하긴 했으나 정확한 이유는 잘 모르겠다...

알게되면 다시 올리겠쑵니닷!

css: {
    preprocessorOptions: {
      scss: {
	additionalData: `@use "@/assets/styles/main.scss" as *;`,
      },
    },
  },

https://github.com/element-plus/element-plus/issues/2116