SASS全球变量和混合物不起作用

Question

我已经使用VUE 3.2.33和VITE 2.9.5设置了一个项目，

当我尝试从任何VUE组件中访问任何全局变量或Mixin时，我会遇到一个不确定的错误。此问题不会在SCSS文件中发生。

该导入本身似乎正常工作，因为其中任何CSS规则都在起作用。

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;
}

示例使用：

<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

在您的vite配置中使用

@import

而不是

@use

vite.config.ts：

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

请记住，您不能再次在main.ts main.tsvariables.scss file否则，您将

[sass] This file is already being loaded.

通过您提到的每个单个组件中的每个组件中的每个组件都会导入此错误，但这确实很乏味，因此在<<代码> vite.config.ts在全球使用的文件中，例如variables.scss.scss文件，Preprocessoroptions 是一个更好的选择。

Answer 2

我设法“解决”了这个问题。事实证明，当我替换所有@USE文件导入规则时，SASS代码是正确导入并有效的。但这会产生一个新问题，因为@import不能在@USE之前放置规则，因此我必须从配置和手动包括进口。

Answer 3

您不是尝试将添加为 * frops 值吗？
这样一行看起来就是这样：

scss: {
    additionalData: '@use "@/styles/variables" as *;',
  },

这对我有用SCSS Mixins对我来说是有效的，我更喜欢此解决方案，因为使用@import而不是@USE这里确实迫使我交换所有@USE s @Import在VUE组件中 s（因为“ @Import规则在@USE之前不能放置@Import规则”错误），这有一些缺点。