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

扩展建议

字体统一设定：可在 body 选择器中添加默认字体

cpp 复制代码

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

颜色变量管理：定义全局颜色变量

cpp 复制代码

$primary-color: #1890ff;
$text-color: #333;

响应式断点：添加媒体查询变量

cpp 复制代码

$breakpoint-sm: 576px;
$breakpoint-md: 768px;

最终效果

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

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