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. 表单元素样式统一

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

相关推荐
行者..................18 分钟前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_1 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员
golang学习记1 小时前
AI 乱写代码?不是模型不行,而是你的 VS Code 缺了 Context!MCP 才是破局关键
前端
星光不问赶路人1 小时前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
z_y_j2299704382 小时前
服务器中使用Docker部署前端项目
服务器·前端·docker·容器
迪丽热爱2 小时前
解决【npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。】问题
前端·npm·node.js
数字冰雹2 小时前
图观 流渲染场景服务器
服务器·前端·数据库·数据可视化
533_2 小时前
[element-plus] el-select 下拉选择图片
vue.js
李明卫杭州2 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-2 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json