css隔离方案、全局设置

可以参照阿里的方案。

全局导入

main.js全局导入

// main.tsimport'./styles/reset.scss'// 浏览器默认样式重置import'./styles/vars.scss'// 全局scss变量、主题色、圆角import'./styles/global.scss'// 全局通用类：body、页面容器、通用按钮// import 'ant-design-vue/dist/reset.css' // UI组件库全局样式 # 看情况要不要

reset.scss

/* 1. 盒模型与基础排版重置 */*, *::before, *::after{box-sizing:border-box;/* 统一盒模型，防止 padding 撑大元素 */margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}/* 2. 文档与主体设置 */html, body{width:100%;height:100%;line-height:1.5;/* 设置基础行高 */font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#333;-webkit-font-smoothing:antialiased;/* 字体平滑渲染 */-moz-osx-font-smoothing:grayscale;}/* 3. HTML5 语义化标签兼容（针对旧版浏览器） */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}/* 4. 列表元素重置 */ul, ol, li{list-style:none;/* 去除默认的圆点或数字 */}/* 5. 标题元素重置 */h1, h2, h3, h4, h5, h6{font-size:100%;font-weight:normal;/* 去除默认的加粗 */}/* 6. 文本与强调元素重置 */a{text-decoration:none;color:inherit;}b, strong{font-weight:bold;}i, em{font-style:italic;}u, ins, s, del{text-decoration:none;}/* 7. 表格元素重置 */table{border-collapse:collapse;/* 合并边框 */border-spacing:0;}caption, th{text-align:left;font-weight:normal;}/* 8. 表单元素重置 */input, button, textarea, select{font:inherit;/* 继承父级字体设置 */color:inherit;outline:none;}button{cursor:pointer;background:none;}textarea{resize:vertical;/* 仅允许垂直拉伸 */}/* 9. 媒体元素重置 */img, video{max-width:100%;height:auto;border:0;display:block;/* 消除图片底部默认的 4px 留白 */}

var.scss

// ========================================== // 1. 品牌与状态色彩系统 // ========================================== $primary-color:#409eff;// 主色调 $success-color:#67c23a;// 成功色 $warning-color:#e6a23c;// 警告色 $danger-color:#f56c6c;// 危险色 $info-color:#909399;// 信息色 // 中性色（文字与边框） $text-color-primary:#303133;// 主要文字 $text-color-regular:#606266;// 常规文字 $text-color-secondary:#909399;// 次要文字 $text-color-placeholder:#c0c4cc;// 占位符文字 $border-color-base:#dcdfe6;// 基础边框 $border-color-light:#e4e7ed;// 浅边框 $bg-color-page:#f5f7fa;// 页面背景色 $bg-color-container:#ffffff;// 容器背景色 // ========================================== // 2. 排版与字体 // ========================================== $font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;$font-size-base:14px;// 基础字号 $font-size-sm:12px;// 小号字体 $font-size-lg:16px;// 大号字体 $font-weight-normal:400;$font-weight-bold:600;$line-height-base:1.5;// ========================================== // 3. 间距系统(基于 4px 倍数)// ========================================== $spacing-xs:4px;$spacing-sm:8px;$spacing-md:16px;$spacing-lg:24px;$spacing-xl:32px;// ========================================== // 4. 边框与圆角 // ========================================== $border-radius-sm:4px;$border-radius-base:8px;$border-radius-lg:12px;$border-radius-round:20px;// 胶囊/标签圆角 // ========================================== // 5. 阴影系统 // ========================================== $box-shadow-light:0 2px 12px 0rgba(0,0,0,0.06);$box-shadow-base:0 4px 20pxrgba(0,0,0,0.05);$box-shadow-dark:0 8px 30pxrgba(0,0,0,0.12);// ========================================== // 6. 全局混合器(Mixins)// ========================================== // Flex 居中布局@mixinflex-center{display:flex;align-items:center;justify-content:center;}// 文本溢出省略号@mixintext-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}// 多行文本溢出省略号@mixinmulti-ellipsis($lines:2){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:$lines;overflow:hidden;}

global.scss

// ========================================== // 1. 引入设计令牌（变量与混合器） // ==========================================@import'./vars.scss';// ========================================== // 2. 浏览器基础重置 (Reset) // ========================================== *, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}html, body{width:100%;height:100%;font-family:$font-family-base;font-size:$font-size-base;line-height:$line-height-base;color:$text-color-primary;background-color:$bg-color-page;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}a{color:$primary-color;text-decoration:none;transition:opacity 0.2s;&:hover{opacity:0.8;}}ul, ol{list-style:none;}img{max-width:100%;display:block;}// ========================================== // 3. Element Plus 全局主题覆盖 // ========================================== // 通过覆盖 CSS 变量，让 Element Plus 自动适配你的 vars.scss :root{--el-color-primary: #{$primary-color}; --el-color-success: #{$success-color}; --el-color-warning: #{$warning-color}; --el-color-danger: #{$danger-color}; --el-color-info: #{$info-color}; --el-border-radius-base: #{$border-radius-base}; --el-font-family: #{$font-family-base}; --el-font-size-base: #{$font-size-base}; --el-text-color-primary: #{$text-color-primary}; --el-text-color-regular: #{$text-color-regular}; --el-border-color: #{$border-color-base}; --el-bg-color-page: #{$bg-color-page};}// 微调 Element Plus 默认样式 .el-button{font-weight:$font-weight-bold;transition:all 0.3s ease;}.el-card{border:none;box-shadow:$box-shadow-light;border-radius:$border-radius-lg;}// ========================================== // 4. 全局工具类 (Utility Classes) // ========================================== // 文本省略 .text-ellipsis{@includetext-ellipsis;}.multi-ellipsis-2{@includemulti-ellipsis(2);}// Flex 布局 .flex-center{@includeflex-center;}.flex-between{display:flex;justify-content:space-between;align-items:center;}// 间距工具类 .mt-sm{margin-top:$spacing-sm;}.mt-md{margin-top:$spacing-md;}.mt-lg{margin-top:$spacing-lg;}.mb-sm{margin-bottom:$spacing-sm;}.mb-md{margin-bottom:$spacing-md;}.mb-lg{margin-bottom:$spacing-lg;}// ========================================== // 5. 全局滚动条美化 (可选) // ========================================== ::-webkit-scrollbar{width:6px;height:6px;}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.15);border-radius:3px;&:hover{background-color:rgba(0,0,0,0.25);}}::-webkit-scrollbar-track{background-color:transparent;}

ant-design-vue/dist/reset.css(这个看情况要不要)

/* Ant Design Vue 官方 reset.css 核心内容 */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:0.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b, strong{font-weight:bolder;}code, kbd, samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button, input, optgroup, select, textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button, input{overflow:visible;}button, select{text-transform:none;}button, [type='button'], [type='reset'], [type='submit']{-webkit-appearance:button;}button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type='checkbox'], [type='radio']{box-sizing:border-box;padding:0;}[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button{height:auto;}[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}[type='search']::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}