使用Vite构建Vue3项目时如何全局引入sass抽象文件

首先确保你已经在项目中安装了sass依赖：

npm i sass -D

Vite 内置了 sass 预处理器支持，不需要额外配置 sass-loader，只需在 vite.config.js 中添加如下配置即可实现和 vue-cli 中 prependData 完全一致的全局注入效果：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  // 配置路径别名，和你原项目的@别名保持一致
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      // 如果用的是缩进语法的.sass文件，此处把scss改为sass即可
      scss: {
        additionalData: `@import "@/styles/abstracts.scss";`
      }
    }
  }
})

注意事项 #

• additionalData 对应的参数值最后需要加英文分号，避免拼接不同文件内容时出现语法错误
• 不要在该配置中引入包含实际样式规则的文件（比如全局类、公共组件样式），否则会导致每一个组件的样式块中都重复插入这份样式，大幅增加打包体积，该配置仅适用于注入sass变量、mixin、函数这类编译后不会生成实际代码的抽象内容
• 修改配置后需要重启Vite开发服务，配置才会生效

内容的提问来源于stack exchange，提问作者Siva Chandran