南庄建网站湖北民族建设集团网站

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

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

// 全局盒模型设定（边框计入宽高）
*,
*::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（没有则新建）：

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

步骤 3：安装依赖

确保已安装 Sass 相关依赖（Vue2 推荐使用 sass-loader@10）：

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

步骤 4：重启项目

npm run serve

扩展建议

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

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

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

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

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

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

最终效果

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

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