SCSS与Bootstrap环境下hover样式不生效，如何修复？

我来帮你排查这个问题，hover样式不生效且控制台看不到对应规则，大概率是这几个原因导致的，咱们一步步来解决：

1. 确认SCSS文件是否正确引入 #

首先要确保你的articles.scss被正确导入到项目的样式入口文件中（比如Rails里的application.scss）。如果没导入的话，你的自定义样式根本不会被编译加载，自然在控制台看不到hover规则。

在application.scss里添加导入语句：

@import "articles";

注意不要加.scss后缀，Rails的asset pipeline会自动识别处理。

2. 提升选择器优先级 #

Bootstrap自带的icon类或者父元素的样式可能优先级比你的.heart-like-icon:hover更高，导致自定义样式被覆盖。你可以尝试增加选择器的特异性：

// 增加父元素选择器来提升优先级
a .heart-like-icon {
  &:hover {
    opacity: 0.5;
  }
}

或者直接针对svg标签编写选择器：

svg.heart-like-icon:hover {
  opacity: 0.5;
}

临时排查的话，可以加!important测试是否是优先级问题（不推荐长期使用，只是快速验证）：

.heart-like-icon:hover {
  opacity: 0.5 !important;
}

3. 检查样式冲突 #

打开浏览器开发者控制台，选中svg元素，查看「Styles」面板：

• 如果看到.heart-like-icon:hover规则被划掉，说明是被更高优先级的样式覆盖了，此时需要继续优化选择器的特异性（比如加上父元素的类/ID）
• 如果完全看不到这个hover规则，那基本就是样式没被加载，回到第一步确认文件导入和编译情况

4. 确认SCSS编译正常 #

有时候SCSS语法错误会导致整个文件编译失败，你的样式就不会生成。可以查看Rails服务器的终端日志，有没有样式编译报错的提示。如果有，修复语法问题后重启服务器。

最后测试步骤 #

改完样式后记得：

• 重启Rails开发服务器（避免asset pipeline缓存问题）
• 用硬刷新（Ctrl+Shift+R）清空浏览器缓存，确保加载最新样式

这样应该就能让hover透明度效果正常生效了。

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