Vue项目的 Sass 全局基础样式格式化方案,包含常见元素的样式重置

步骤 1:创建全局样式文件

在项目中创建文件:src/assets/scss/global.scss

内容如下:

cpp 复制代码
// 全局盒模型设定(边框计入宽高)
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

// 基础元素样式重置
body, div, p, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd, blockquote,
figure, figcaption, hr, pre, form, fieldset,
input, textarea, button, img {
  margin: 0;
  padding: 0;
  border: 0;
}

// 图片默认处理
img {
  display: block;      // 解决图片底部间隙问题
  max-width: 100%;     // 响应式限制
  height: auto;        // 保持比例
}

// 列表项去除默认符号
ul, ol, li {
  list-style: none;
}

// 链接样式重置
a {
  text-decoration: none;
  color: inherit;
  &:hover {
    text-decoration: underline;
  }
}

// 表格边框合并
table {
  border-collapse: collapse;
  border-spacing: 0;
}

// 表单元素重置
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

// 移除输入框默认样式(可选)
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

步骤 2:配置全局引入

修改 vue.config.js(没有则新建):

cpp 复制代码
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 注意根据 sass-loader 版本调整属性名:
        // v8 用 'prependData', v10+ 用 'additionalData'
        additionalData: `@import "@/assets/scss/global.scss";`
      }
    }
  }
};

步骤 3:安装依赖

确保已安装 Sass 相关依赖(Vue2 推荐使用 sass-loader@10):

cpp 复制代码
npm install sass sass-loader@10 --save-dev

步骤 4:重启项目

cpp 复制代码
npm run serve

扩展建议

  1. 字体统一设定:可在 body 选择器中添加默认字体
cpp 复制代码
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
  1. 颜色变量管理:定义全局颜色变量
cpp 复制代码
$primary-color: #1890ff;
$text-color: #333;
  1. 响应式断点:添加媒体查询变量
cpp 复制代码
$breakpoint-sm: 576px;
$breakpoint-md: 768px;

最终效果

  1. 所有元素默认无内外边距
  2. 盒子尺寸包含边框(border-box 模型)
  3. 图片自适应且无底部间隙
  4. 列表无默认符号
  5. 链接无下划线
  6. 表单元素样式统一

可根据项目需求在上述模板基础上继续扩展!

相关推荐
Mr.Jessy7 分钟前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
神膘护体小月半33 分钟前
css 的 clip-path 属性,绘制气泡
css
code_YuJun33 分钟前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我34 分钟前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
代码改变世界1008640 分钟前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节
Elieal1 小时前
AJAX 知识
前端·ajax·okhttp
sulikey1 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烛阴2 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智2 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front2 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron