Vite+Vue3项目全局引入scss文件

在Vite+Vue 3项目中，要全局引入SCSS文件，你可以使用Vite提供的全局样式插件。以下是步骤和示例代码：

1. 安装SCSS预处理器依赖：

npm install -D sass

2. 在项目根目录下创建一个全局样式文件，比如styles/global.scss。
3. 在vite.config.js配置文件中，使用css选项来指定全局样式文件，并确保scss选项设置为true。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
})

4. 在global.scss文件中，写入你的全局样式规则。

// styles/global.scss
@import '~@/styles/abstracts/variables.scss';
@import '~@/styles/abstracts/mixins.scss';
 
body {
  font-family: 'Arial', sans-serif;
  color: map-get($colors, 'primary');
}
 
/* 其他全局样式 */

确保你的样式导入采用绝对路径的形式，以便Vite可以正确处理它们。

以上步骤将会使得global.scss中的样式在项目的每个组件中自动应用。