Les variables globales Sass et les mixins ne fonctionnent pas

Question

J'ai mis en place un projet en utilisant Vue 3.2.33 et Vite 2.9.5

Je reçois une erreur non définie lorsque j'essaie d'accéder à une variable globale ou à un mixin à partir de n'importe quel composant vue. Ce problème ne se produit pas dans les fichiers scss.

L'importation elle-même semble fonctionner correctement, car toutes les règles CSS qu'elle contient sont valides.

vite.config.ts :

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";',
            },
        },
    },
});

src/styles/_variables.scss :

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

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

Exemple d'utilisation :

<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

Utilisation

@import

dans votre configuration vite

@use

vite.config.ts：

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

N'oubliez pas que vous ne pouvez pas accéder à main.ts 文件中再次导入相同的文件 variables.scss, sinon vous obtiendrez cette erreur

[sass] This file is already being loaded.

Au fait, vous pouvez également importer manuellement le fichier scss dans chaque composant comme vous l'avez mentionné, mais c'est vraiment fastidieux, alors utilisez global dans preprocessorOptions Import scss 文件，但这确实很乏味，因此在 preprocessorOptions 中使用全局导入对于像 variables.scss 文件这样全局使用的文件来说，vite.config.ts est un meilleur choix pour les fichiers utilisés globalement comme les fichiers variables.scss.

Answer 2

J'ai réussi à "résoudre" ce problème. Il s'avère que lorsque je remplace toutes les clés @use 规则时，sass 代码已正确导入并可以工作。但这会产生一个新问题，因为 @import 规则不能放在 @use 之前，因此我必须从配置中删除 additionalData dans l'importation du fichier et que j'inclus l'importation manuellement.