Html 用SASS筑巢似乎对我不起作用？

所以我一直在尝试让SASS为一个项目工作，但出于某种原因，嵌套不想为我工作

当我将.header菜单的代码段移到嵌套之外时，它工作得很好，只是没有嵌套

这是index.html的代码：

最后是编译的CSS代码：

.header{
背景色：白色；
}
.标题菜单{
背景色：红色；
}
.标题.标题菜单{
背景颜色：橙色；
}
.网页{
背景颜色：浅灰色；
}
/*#sourceMappingURL=style.css.map*/

我希望我已经提供了足够的信息，如果没有请让我知道

迪奥库拉

编辑 在此，我提供了我的chrome webdev工具网络选项卡的图像：

我使用的SASS版本也是：1.25.0 NPM的版本是：6.13.0

---

您可以将另一个

&

放置在

&-菜单的开头，将其嵌套在
.header
中

.header {
  background-color: white;

  & &-menu {
    background-color: red;
  }

  .header-menu {
    background-color: orange;
  }
}

编译CSS：

.header{
背景色：白色；
}
.标题.标题菜单{
背景色：红色；
}
.标题.标题菜单{
背景颜色：橙色；
}
您可以将另一个
&
放置在
&-菜单
的开头，将其嵌套在
.header
中

.header {
  background-color: white;

  & &-menu {
    background-color: red;
  }

  .header-menu {
    background-color: orange;
  }
}

编译CSS：

.header{
背景色：白色；
}
.标题.标题菜单{
背景色：红色；
}
.标题.标题菜单{
背景颜色：橙色；
}
答案
所以在睡了一个好觉之后我找到了asnwer，
你们在某些方面都很好，这鼓励我去别的地方看看

问题是我链接了错误的样式表，这是我在查看DevTools中的网络请求后才发现的

在那里，我看到它正在加载style.scss文件，而浏览器当然无法读取该文件。它应该是CSS文件

因此，我将文件夹和文件更改为：



致：



答复
所以在睡了一个好觉之后我找到了asnwer，
你们在某些方面都很好，这鼓励我去别的地方看看

问题是我链接了错误的样式表，这是我在查看DevTools中的网络请求后才发现的

在那里，我看到它正在加载style.scss文件，而浏览器当然无法读取该文件。它应该是CSS文件

因此，我将文件夹和文件更改为：



致：



简而言之，您需要编译
.header.header菜单
，而不是
.header菜单
？是否有一种样式覆盖您输入的内容？您是否有其他CSS文件可能导致此问题？这也可能是缓存问题。除了上述问题，您是否看到已编译的CSS文件正确加载到您的网页中？（请参见DevTools中的网络选项卡）@Azametzin简言之，我想要的是能够嵌套我的样式，因为div“header menu”位于div“header”中，我想要能够以相同的方式布局我的样式，因此如果我在“header”中有更多div的话我可以很容易地将它们的syling添加到de header div中。如果这澄清了some@disinfor不，我已经检查过en清空了我的缓存，但是没有区别。总之，你想要的是编译
.header.header菜单
而不是
.header菜单
？是否有一种样式覆盖了你输入的内容？您是否有其他CSS文件可能导致此问题？这也可能是缓存问题。除了上述问题，您是否看到已编译的CSS文件正确加载到您的网页中？（请参见DevTools中的网络选项卡）@Azametzin简言之，我想要的是能够嵌套我的样式，因为div“header menu”位于div“header”中，我想要能够以相同的方式布局我的样式，因此如果我在“header”中有更多div的话我可以很容易地将它们的syling添加到de header div中。如果这澄清了some@disinfor不，我已经检查过en清空了我的缓存，但没有区别，这样everOP就不必嵌套它了。他们提供的编译代码应该可以正常工作。尤其是这样一个简单的布局。我怀疑还有其他原因……可能是重写样式或实际代码中的输入错误。是的，这个问题需要更多详细信息。@Azametzin为了能够提供帮助，您希望获得更多详细信息吗？也许我可以提供它们。OP不需要嵌套它。他们提供的编译代码应该可以正常工作。尤其是这样一个简单的布局。我怀疑还有其他原因……可能是重写样式或实际代码中的输入错误。是的，这个问题需要更多详细信息。@Azametzin为了能够提供帮助，您希望获得更多详细信息吗？也许我能提供给你。很高兴你找到了答案！很高兴你明白了！
.header {
  background-color: white;

  & &-menu {
    background-color: red;
  }

  .header-menu {
    background-color: orange;
  }
}