css隔离方案、全局设置

文章目录

- - 全局导入

可以参照阿里的方案。

全局导入

main.js全局导入

js 复制代码

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

reset.scss

css 复制代码

/* 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 留白 */
}

vars.scss

注：文件名是vars(带s)，不是var。

css 复制代码

// ==========================================
// 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 0 rgba(0, 0, 0, 0.06);
$box-shadow-base: 0 4px 20px rgba(0, 0, 0, 0.05);
$box-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.12);

// ==========================================
// 6. 全局混合器 (Mixins)
// ==========================================
// Flex 居中布局
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 文本溢出省略号
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本溢出省略号
@mixin multi-ellipsis($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

global.scss

css 复制代码

// ==========================================
// 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 { @include text-ellipsis; }
.multi-ellipsis-2 { @include multi-ellipsis(2); }

// Flex 布局
.flex-center { @include flex-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(这个看情况要不要)

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;
}