vue安装sass全局配置

1. 安装sass包

//yarn安装
yarn add sass sass-loader
//npm安装
npm i sass sass-loader -D

2. vite.config.ts配置css

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path');


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //设置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 index.scss 这样就可以在全局中使用 index.scss中预定义的变量了
        additionalData: '@import "./src/Style/Sass/index.scss";'
      }
    }
  }
})

3.使用

//全局scss文件
$red-color:red;

//组件中使用
.a {
  height: 100vh;
  background-color: $red-color;
}