运行yarn start后CSS字体大小自动还原的问题求助

架构老林

2026-7-9

问题描述

我修改了CSS中.btn-sm及.btn-group-sm > .btn的font-size，从0.875rem改成1rem，但执行yarn start测试时，字体大小自动还原成0.875rem。已经试过清除缓存，没用，求解决方案。

原始代码

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.5rem 1rem;
 font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0;
}

解决方案

提升样式优先级：自定义CSS可能被框架默认样式覆盖，给选择器添加更高优先级，比如加上父容器类名，或临时用!important测试（不推荐长期使用）：
```
.your-parent-class .btn-sm,
.your-parent-class .btn-group-sm > .btn {
  font-size: 1rem !important;
}
```
确认修改文件的正确性：检查构建工具（webpack/vite等）配置，确认你修改的CSS文件是项目实际打包引用的入口文件，排查是否存在自动导入框架默认样式的逻辑（比如import 'bootstrap/dist/css/bootstrap.css'）。
检查预处理器变量：如果使用Sass/Less，框架可能通过变量定义.btn-sm的字体大小（比如Bootstrap的$btn-font-size-sm），找到变量文件修改后重新编译：
```
$btn-font-size-sm: 1rem;
@import "bootstrap";
```

清理构建缓存：除浏览器缓存外，清理构建工具缓存：

yarn cache clean
# vite项目额外执行：rm -rf node_modules/.vite
# webpack项目额外执行：rm -rf dist node_modules/.cache

排查脚本钩子：查看package.json的scripts部分，确认是否有prestart这类自动重置样式的脚本：
```
"scripts": {
  "prestart": "xxx-reset-css-script"
}
```
定位样式来源：打开浏览器DevTools，查看.btn-sm元素的样式面板，找到覆盖font-size的来源文件，调整样式引入顺序，让自定义样式在框架样式之后加载。