ASP.NET Core MVC中如何阻止_reboot.scss覆盖自定义CSS？

问题根源 #

你的自定义样式被覆盖，核心是CSS优先级规则在起作用：Bootstrap的_reboot.scss里直接用p标签选择器，和你写的通配符*优先级相同，但如果Bootstrap的样式文件比你的site.css后加载，就会覆盖你的规则。另外ASP.NET Core MVC的样式引用顺序、捆绑配置也会影响最终生效的样式。

实用解决办法 #

1. 调整样式加载顺序 #

在_Layout.cshtml里，把Bootstrap的引用放在前面，你的site.css放在后面——后加载的样式会覆盖优先级相同的前置规则：

<!-- 先加载Bootstrap核心样式 -->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<!-- 再加载自定义样式 -->
<link rel="stylesheet" href="~/css/site.css" />

2. 提升自定义样式优先级 #

不用通配符*，改用更具体的选择器，或者直接给目标规则加权重：

• 针对p标签写更明确的选择器：

  body p {
    margin: 0;
    padding: 0;
  }
  

• 临时应急可以用!important（别滥用，避免后续样式冲突）：

  p {
    margin: 0 !important;
    padding: 0 !important;
  }
  

3. 禁用Bootstrap的Reboot模块 #

如果不需要Bootstrap的全局重置效果，在SCSS入口文件（比如site.scss）里导入Bootstrap时跳过Reboot：

// 先导入Bootstrap基础工具（函数、变量、混合宏）
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// 按需导入你需要的模块（比如网格、按钮），不要导入reboot

注意：这种方式要求项目用SCSS编译，不能直接用编译好的Bootstrap CSS文件。

4. 检查样式捆绑配置 #

如果项目用了ASP.NET Core的样式捆绑功能，要确保自定义样式在捆绑队列里排在Bootstrap之后。比如在Program.cs或BundleConfig.cs里调整：

bundles.Add(new StyleBundle("~/css/bundle").Include(
  "~/lib/bootstrap/dist/css/bootstrap.min.css",
  "~/css/site.css" // 放在Bootstrap之后
));

内容的提问来源于stack exchange，提问作者Kroi