使用SASS

安装sass

npm install sass -D

安装normalize.css初始化样式

npm install --save normalize.css

新建style目录保存各种样式

variables.scss配置全局变量

//主题色
$color-primary: #409EFF;
//复制信息提示色
$color-success: #67C23A;
$color-warning: #E6A23C;
$color-danger: #F56C6C;
$color-info: #909399;
//文本颜色
$color-text-primary: #303133;
$color-text-regular: #606266;
$color-text-secondary: #909399;
$color-text-placeholder: #C0C4CC;
//边框颜色
$color-border-base: #DCDFE6;
$color-border-light: #E4E7ED;
$color-border-lighter: #EBEEF5;
$color-border-extra-light: #F2F6FC;
//背景颜色
$color-background-white: #FFFFFF;
$color-background-black: #000000;
$color-background-base: #F5F7FA;
//字体大小
$size-font-h1: 36px;
$size-font-h2: 24px;

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

@import "./normalize.css";
@import "./element-ui.scss";
@import "./transition.scss";
@import "./variables.scss";
#app{
  color: $color-primary;
}

main.js中引入index.scss

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

vue代码使用变量

<style lang="scss">
@import "~@/assets/style/variable";
#app {
  color: $color-primary;
  text-align: center;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>