• 问题出现

当我们在创建全局变量文件引入到项目之中，得在vite打包工具解析配置文件中添加预处理选项：

  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },

这时会出现一个预处理失败无法导入全局变量文件问题：

  [sass] Error: Can't find stylesheet to import.
    ╷
  1 │ @import "./src/styles/variable.scss";
    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    D:\vue3_admin\project\src\App.vue 1:9  root stylesheet

• 问题分析

查看package.json中sass对应的版本

    "sass": "^1.89.0",
    "sass-embedded": "^1.89.0",
    "sass-loader": "^16.0.5",


    "vite": "^6.3.5",

导入失败的原因是版本问题

在 Sass 1.23.0 版本中引入@use，旨在替代之前的 @import 规则，并解决了一些 @import 产生的问题，比如命名冲突、全局作用域污染等。

@use 允许你按模块的方式导入样式表，使得导入的内容（如变量、混合宏、函数等）默认是局部的，避免了与全局样式的冲突。它还允许你为导入的模块创建别名，从而避免了可能出现的命名冲突问题。

那为什么要引入@use呢？

1. 模块化作用域： 通过 @use 导入的文件中的所有变量、混合宏和函数都会被自动限制在该模块内，除非显式地使用 as 来重命名它们或引入它们到全局作用域。
2. 消除重复导入： 每个样式表只会被加载一次，避免了 @import 导入同一文件多次的问题。
3. 文件路径更清晰： @use 不需要写文件扩展名 .scss，而且文件路径必须是相对路径或以模块系统支持的路径来指向。

• 问题解决

vite配置文件vite.config.ts在css预处理配置中 采用@use来导入全局变量配置文件

  css: {
    preprocessorOptions: {
      // 引入公共scss变量
      scss: {
        additionalData: '@use "@/styles/variable.scss" ;',
      }
    }
  },

•  问题衍生

在预处理报错问题后，当用$a引入全局变量 ，又会出现一个问题[sass] Error: Undefined variable.

[sass] Error: Undefined variable.
    ╷
  4 │     color:$color;
    │           ^^^^^^
    ╵

解决方案1：在引入变量时加variable.前缀例如variable.$color 这样会在每一次都得加

解决方案2： 每一个引入scss文件的位置都要加一个 as *

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

配置文件vite.config.ts在css预处理配置中

  css: {
    preprocessorOptions: {
      // 引入公共scss变量
      scss: {
        additionalData: '@use "@/styles/variable.scss" as *;',
      }
    }
  },

在每一个引入scss文件的位置都要加一个 as *

//引入清楚默认样式
@use './reset.scss' as *;

这样就解决了vue3引入scss全局变量预处理失败，和其衍生问题