可以导入本地样式表；也可以导入在线样式表
可以全局引入；也可以组件引入
<link> - html 文件引入
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3859342_gvcksnd8b65.css">
@import - CSS 文件中引入
@import './base.css'; @import url(//at.alicdn.com/t/c/font_4235521_vw0a33le7e.css);
import - 逻辑中引入，如在入口文件 main.js 中全局引入；只能引入本地文件
import "./assets/main.css";
<body>在挂载点的外围，不在组件的作用域内
方案1：CSS变量定义在全局样式中
方案2：取消组件样式的作用域限制 scoped
:root {
--bg-color: #fff;
--txt-color: #000;
}
body {
background-color: var(--bg-color);
color: var(--txt-color);
height: 100vh;
}
body.dark-theme {
--bg-color: #000;
--txt-color: #fff;
}
const changeTheme = () => {
darkMode.value = !darkMode.value
window.document.body.classList.toggle('dark-theme', darkMode.value)
}