Vite 中怎么添加全局 scss 文件

在Vite项目中添加全局SCSS文件，你需要做以下几步：

1. 安装SCSS加载器：

   确保你已经安装了sass或scss相关的包，例如sass或sass-loader。如果还没有安装，可以通过npm或yarn来安装：

npm install sass -D
# 或者
yarn add sass -D

2. 创建全局SCSS文件：

   在项目中创建一个全局的SCSS文件，比如styles/global.scss。

3. 配置Vite配置文件：

   在Vite配置文件中（通常是vite.config.js或vite.config.ts），使用Vite提供的插件API或配置选项来引入全局SCSS文件。

例如，你可以使用Vite提供的css.preprocessorOptions配置来指定全局样式文件：

// vite.config.js
import { defineConfig } from 'vite';
import scss from 'sass';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
});

在这个配置中，@import "@/styles/global.scss";指令会被加入到每个被Vite处理的SCSS文件中，使得global.scss中的样式规则会被全局应用。

注意：@ 符号通常在Vite配置中代表项目的src目录。

确保你的全局SCSS文件中的样式规则是全局作用域的，或者使用Vite提供的additionalData选项来避免局部样式意外地污染全局命名空间。