Sass 全域變數和 mixin 不起作用

Question

我已經使用 Vue 3.2.33 和 Vite 2.9.5 設定了一個項目

當我嘗試從任何 vue 元件中存取任何全域變數或 mixin 時，我收到未定義的錯誤。 scss 檔案中不會出現此問題。

導入本身似乎運作正常，因為其中的任何 css 規則都有效。

vite.config.ts：

import { fileURLToPath, URL } 從 '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";',
            },
        },
    },
});

src/styles/_variables.scss：

// breakpoints
$breakpoints: (
    "sm": 576px,
    "md": 768px,
    "lg": 992px,
    "xl": 1200px,
    "xxl": 1400px,
);

@mixin test {
    border: 3px solid red;
}

使用範例：

<style scoped lang="scss">
@use 'sass:map';

.container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    @include test; // <- undefined

    &--fluid {
        max-width: 100%;
        width: 100%;
    }
}

$widths: (
    'sm': 540px,
    'md': 720px,
    'lg': 960px,
    'xl': 1140px,
    'xxl': 1320px,
);

@each $breakpoint, $width in $widths {
    @media (min-width: map.get($breakpoints, $breakpoint)) { // <- $breakpoints undefined
        .container {
            max-width: $width;
        }
    }
}
</style>

Answer 1

使用

@import

在你的 vite 設定中而不是

@use

vite.config.ts：

export default defineConfig({
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "./src/styles/variables.scss";',
            },
        },
    },
});

請記住，您不能在 main.ts 檔案中再次匯入相同的檔案 variables.scss，否則，您將收到此錯誤

[sass] This file is already being loaded.

順便說一句，您也可以按照您提到的方式在每個組件中手動導入scss 文件，但這確實很乏味，因此在preprocessorOptions 中使用全局導入對於像variables.scss 檔案這樣全域使用的檔案來說，vite.config.ts 是更好的選擇。

Answer 2

我已經設法「解決」了這個問題。事實證明，當我替換文件導入的所有 @use 規則時，sass 程式碼已正確導入並可以工作。但這會產生一個新問題，因為@import 規則不能放在@use 之前，因此我必須從配置中刪除additionalData 鍵並手動包含導入。