在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样式将被正确处理和应用。
