如何将sudo类与SASS和Angular一起使用

因此，我有一个.scss文件，它正确地获取了基本样式，但未能获取sudo类的样式：hover

这里是homepage.scss

.link {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
  
  & :hover {
      color :"#002447";
  }
}

这是homepage.component.html中的相关代码

<li><button class="link" role="link" (click)="dostuff()">Remote Support</button></li>

我们可以看到hover sudo类不存在。

但我们可以看到其他样式在chrome开发者控制台中正确显示

我还尝试删除：hover和&之间的空格，我还尝试删除CSS版本中的相同空格

在我的package-lock.json中，我有这些特定版本的SASS

sass:1.23.3

sass加载器：8.0.0

---

我还使用foundaton.css和font-awesome，以防出现任何已知冲突。

在&和：悬停之间不需要任何空间。保留编译为css的代码，如下所示：

.link:悬停{ //... } 这显然是错误的。相反，我们希望编译后的css如下所示：

.link:悬停{ //... } 相反，你应该：

.link {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
  
  &:hover {
      color : #002447;
  }
}

编辑：作为一个一般提示和帮助我的东西，如果我对SCSS中的东西如何编译成CSS感到好奇，我会去检查它编译成什么

---

编辑2：删除十六进制代码周围的引号。请参见

在&和：悬停之间不需要空间。保留编译为css的代码，如下所示：

.link:悬停{ //... } 这显然是错误的。相反，我们希望编译后的css如下所示：

.link:悬停{ //... } 相反，你应该：

.link {
  text-decoration: underline;
  color : rgb(39,82,180);
  cursor: pointer;
  
  &:hover {
      color : #002447;
  }
}

编辑：作为一个一般提示和帮助我的东西，如果我对SCSS中的东西如何编译成CSS感到好奇，我会去检查它编译成什么

---

编辑2：删除十六进制代码周围的引号。请参见

您是否尝试过&:hover，没有任何空格？.link{text装饰：下划线；color:rgb39,82180；cursor:pointer；&:hover{color:002447；}}@Roy，是的，我尝试过。您尝试过&:hover，没有空格吗？.link{text装饰：下划线；color:rgb39,82180；cursor:pointer；&:hover{color:002447；}}@Roy，是的，我试过了。很抱歉，但这并不能解决问题。该样式不会显示在视觉上或chrome开发人员控制台中。我可以在“样式”部分搜索hov或.link，但悬停部分不会显示。@AlexanderRyanBaggett你确定你做得正确吗？因为在你的问题中，你表明你没有进行declare多次正确使用伪选择器。在.link和：hover之间留有空格是不正确的。另外，你的十六进制不需要加引号。从002447左右删除它们。参考：我以为我复制并粘贴了它，但显然我没有。我只是删除了空格。你的版本似乎有效。我会将其标记为已接受的答案。它是loo我不小心在颜色周围加了引号，这就是为什么删除空格似乎不起作用的原因。很抱歉，但这并不能解决问题。该样式在视觉上或chrome开发者控制台中都不会出现。我可以在样式部分搜索hov或.link，但悬停部分不会出现。@AlexanderRyanBaggett您确定吗你做得对吗？因为在你的问题中，你多次表明你没有正确声明伪选择器。在.link和：hover之间有一个空格是不正确的。另外，你的十六进制不需要在引号中。从002447左右删除它们参考：我以为我复制并粘贴了它，但显然我没有。我刚刚删除了空格。您的版本似乎有效。我会将其标记为已接受的答案。看起来我不小心在颜色周围加了引号，这就是删除空格似乎无效的原因。