加入SASS

安装sass

npm install sass -D
npm install sass-loader -D
npm install node-sass -D

安装normalize.css初始化样式

npm install --save normalize.css

新建style目录保存各种样式

index.scss中组织这些样式，并编写全局样式

@import "./normalize.css";
@import "./element-ui.scss";
@import "./transition.scss";
@import "./variable.scss";
@import "./theme.scss";
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: $color-background-base;
}

main.js中引入index.scss

import {createApp} from 'vue'
import App from './App.vue'
import router from '@/router';
import store from '@/store';
import '@/assets/style/index.scss'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

vite.config.js添加全局scss变量文件

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
    alias: {
        '@': path.resolve(__dirname, 'src')
    },
    plugins: [vue()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/assets/style/variable.scss";`
            }
        }
    }
})

Home.vue使用全局变量

<template>
  <h1>这是首页</h1>
  <button @click="valueAdd">{{ value }}</button>
</template>
<script setup>
import store from '@/store/index'
import {computed} from "vue";
const value = computed(() => store.state.count)
const valueAdd = () => {
  store.commit('add')
}
</script>
<style scoped lang="scss">
h1 {
  color: $color-primary;
}
</style>