2025新版scss使用注意事项与全局变量设置教程

我设置了一个reset.scss来对项目里的插件和内容进行重置

我在index中希望导入这个文件

使用@import来导入对应文件，同时在vite.config.ts中添加variable.scss来作为全局变量使用（名字任意起名即可）

旧版配置成功，但是控制台scss在所有使用@import处报弃用警告

新版的正确导入方式如下：

vite.config.ts文件内容如下：

        填入你自己scss文件的地址即可，改为使用新版的@use

css: {
  // css预处理器
  preprocessorOptions: {
      scss: {
          charset: false,
          additionalData: '@use "./styles/variable.scss" as *;',
      },
  },
}

我在index.scss中想要引入我的reset.scss则修改为

@use './reset.scss' as *

varible.scss则可以正常使用全局变量了

在 Sass 中，@use 规则用于加载另一个样式表，并将其内容作为模块导入。

与 @import 不同，@use 规则会创建一个命名空间，以避免变量、函数和混合宏的命名冲突。

as * 的作用是将导入的模块内容直接暴露在当前样式表的命名空间中，这样你就可以像使用 @import 一样直接使用导入的变量、函数和混合宏。

例如，假设 reset.scss 文件中有以下内容：

$reset-color: #fff;

@mixin reset-mixin {
  margin: 0;
  padding: 0;
}

在 index.scss 文件中使用 @use './reset.scss' as *; 后，你可以直接使用 $reset-color 变量和 reset-mixin 混合宏，而不需要通过命名空间引用它们：

@use './reset.scss' as *;

body {
  background-color: $reset-color;
  @include reset-mixin;
}

如果不使用 as *，你需要通过命名空间来引用导入的内容。例如：

@use './reset.scss';

body {
  background-color: reset.$reset-color;
  @include reset.reset-mixin;
}

使用 as * 可以简化代码，使其更接近于 @import 的使用方式，同时仍然享受 @use 带来的模块化和避免命名冲突的好处，且较为常用。