vite项目全局配置sass变量

在Vite项目中，如果您想在每个Vue文件中使用公用的Sass文件，可以通过在主文件中引入并设置为全局样式来实现。这样，在每个Vue文件中就不需要再单独引入该Sass文件。

以下是一种设置全局样式的方法：

在您的Vite项目中创建一个名为main.scss（或者其他您喜欢的名称）的文件，并将公用的Sass样式放在其中。例如：

// main.scss

$text-white-color: #ffffff;

.whiteColor {
  color: $text-white-color !important;
}

• 确保您的Vite项目已经安装了处理Sass的插件，例如sass和sass-loader。

确保您的项目已经安装了sass和@vitejs/plugin-vue这两个依赖项。如果尚未安装，可以使用以下命令进行安装：

npm install sass @vitejs/plugin-vue --save-dev

在您的Vite项目根目录下，创建一个vite.config.js文件（如果已经存在，请跳过此步骤）。

在vite.config.js文件中，添加以下内容来配置Sass支持：

// vite.config.js

const { defineConfig } = require('vite');
const vue = require('@vitejs/plugin-vue');

module.exports = defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/path/to/your/main.scss";`,
      },
    },
  },
});

请确保将@/path/to/your/main.scss替换为实际的main.scss文件路径。

现在，您可以在Vue文件中使用全局Sass样式，而无需在每个文件中单独引入。
通过执行上述步骤，您手动配置了Vite以支持Sass样式，并将main.scss文件作为全局样式引入到项目中。当您重新启动Vite开发服务器时，Sass样式将被正确处理和应用。