Sass 전역 변수 및 믹스인이 작동하지 않습니다.

Question

Vue 3.2.33과 Vite 2.9.5를 사용하여 프로젝트를 설정했습니다

Vue 구성 요소에서 전역 변수나 믹스인에 액세스하려고 하면 정의되지 않은 오류가 발생합니다. scss 파일에서는 이 문제가 발생하지 않습니다.

모든 CSS 규칙이 유효하므로 가져오기 자체가 제대로 작동하는 것 같습니다.

vite.config.ts:

으아아아

src/styles/_variables.scss:

으아아아

사용 예:

import { fileURLToPath, URL } from 'url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@use "@/styles/variables";',
            },
        },
    },
});

Answer 1

사용

으아아아

대신 vite 구성에서

으아아아

vite.config.ts：

으아아아

당신은 main.ts 文件中再次导入相同的文件 variables.scss에 들어갈 수 없다는 점을 기억하세요. 그렇지 않으면 이 오류가 발생합니다

으아아아

그런데 말씀하신 대로 각 구성 요소의 scss 파일을 수동으로 가져올 수도 있지만 정말 지루하므로 preprocessorOptions에서 전역을 사용하세요. 가져오기 scss 文件，但这确实很乏味，因此在 preprocessorOptions 中使用全局导入对于像 variables.scss 文件这样全局使用的文件来说，vite.config.ts가 파일에 더 나은 선택입니다. variables.scss 파일처럼 전역적으로 사용됩니다.

Answer 2

저는 이 문제를 "해결"했습니다. 파일 가져오기에서 모든 @use 规则时，sass 代码已正确导入并可以工作。但这会产生一个新问题，因为 @import 规则不能放在 @use 之前，因此我必须从配置中删除 additionalData 키를 교체하고 가져오기를 수동으로 포함시키는 것으로 나타났습니다.