Vue项目的 Sass 全局底子样式格式化方案，包罗常见元素的样式重置

步调 1：创建全局样式文件

在项目中创建文件：src/assets/scss/global.scss
内容如下：

1. // 全局盒模型设定（边框计入宽高）
2. *,
3. *::before,
4. *::after {
5.   box-sizing: border-box;
6.   margin: 0;
7.   padding: 0;
8. }
10. // 基础元素样式重置
11. body, div, p, h1, h2, h3, h4, h5, h6,
12. ul, ol, li, dl, dt, dd, blockquote,
13. figure, figcaption, hr, pre, form, fieldset,
14. input, textarea, button, img {
15.   margin: 0;
16.   padding: 0;
17.   border: 0;
18. }
20. // 图片默认处理
21. img {
22.   display: block;      // 解决图片底部间隙问题
23.   max-width: 100%;     // 响应式限制
24.   height: auto;        // 保持比例
25. }
27. // 列表项去除默认符号
28. ul, ol, li {
29.   list-style: none;
30. }
32. // 链接样式重置
33. a {
34.   text-decoration: none;
35.   color: inherit;
36.   &:hover {
37.     text-decoration: underline;
38.   }
39. }
41. // 表格边框合并
42. table {
43.   border-collapse: collapse;
44.   border-spacing: 0;
45. }
47. // 表单元素重置
48. button, input, optgroup, select, textarea {
49.   font-family: inherit;
50.   font-size: 100%;
51.   line-height: 1.15;
52.   margin: 0;
53. }
55. // 移除输入框默认样式（可选）
56. input[type="number"]::-webkit-inner-spin-button,
57. input[type="number"]::-webkit-outer-spin-button {
58.   -webkit-appearance: none;
59.   margin: 0;
60. }

复制代码

步调 2：设置全局引入

修改 vue.config.js（没有则新建）：

1. module.exports = {
2.   css: {
3.     loaderOptions: {
4.       sass: {
5.         // 注意根据 sass-loader 版本调整属性名：
6.         // v8 用 'prependData', v10+ 用 'additionalData'
7.         additionalData: `@import "@/assets/scss/global.scss";`
8.       }
9.     }
10.   }
11. };

复制代码

步调 3：安装依赖

确保已安装 Sass 干系依赖（Vue2 保举使用 sass-loader@10）：

1. npm install sass sass-loader@10 --save-dev

复制代码

步调 4：重启项目

1. npm run serve

复制代码

扩展发起

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

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

复制代码

• 颜色变量管理：界说全局颜色变量
  

1. $primary-color: #1890ff;
2. $text-color: #333;

复制代码

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

1. $breakpoint-sm: 576px;
2. $breakpoint-md: 768px;

复制代码

终极效果

• 全部元素默认无表里边距
  
• 盒子尺寸包罗边框（border-box 模子）
  
• 图片自顺应且无底部间隙
  
• 列表无默认符号
  
• 链接无下划线
  
• 表单位素样式同一
  

可根据项目需求在上述模板底子上继承扩展！