css隔离方案、全局设置

文章目录全局导入reset.scssvar.scssglobal.scssant-design-vue/dist/reset.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, [typebutton], [typereset], [typesubmit]{-webkit-appearance:button;}button::-moz-focus-inner, [typebutton]::-moz-focus-inner, [typereset]::-moz-focus-inner, [typesubmit]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring, [typebutton]:-moz-focusring, [typereset]:-moz-focusring, [typesubmit]:-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;}[typecheckbox], [typeradio]{box-sizing:border-box;padding:0;}[typenumber]::-webkit-inner-spin-button, [typenumber]::-webkit-outer-spin-button{height:auto;}[typesearch]{-webkit-appearance:textfield;outline-offset:-2px;}[typesearch]::-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;}