【Vite+Vue3】安装Sass及其配置，以及别名路径配置

1. 项目安装Sass依赖包

  yarn add sass -D 

2. 项目安装Path依赖包

yarn add path

3. 修改vite.config.js配置文件

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // 配置`@`指向src目录
    }
  },

  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        // 目前版本sass已抛弃@import命令，改用@use
        additionalData: '@use "@/assets/styles/variable.scss" as *;'
      }
    }
  }
})

additionalData处配置项目默认的全局Sass样式文件的路径。

完。