Sass 嵌套样式带来忽略/无效

Question

我正在开发一个使用 @import url() 的 Vue 应用程序，我的嵌套样式如下图所示。我发现当我使用外部 .scss 时，这就是为什么我的样式没有转换为 css 但我不明白为什么？以及该怎么办。 以下是我的代码

  li{
    border-bottom: 1px solid #eaeaea;
    background: #fff;
  a{
    div{
      border: 1px solid red;
    }
  }
}

编译时也没有错误。

Answer 1

看起来您在 html 中包含了 SASS 代码。
如果您愿意，您应该检查:

1. 在您的html中文件:你真的链接了.css吗？文件到您的 html 或者您是否链接了 .scss文件为 html。
2. 在您的CSS中file:是编译后的SASS代码。

---

更新:错误已重构

我做了什么:

将此代码添加到 CSS 文件 style.css ...

li {
  border-bottom: 1px solid gray;
  background: red;
  a {
    div {
      border: 1px solid red;
    }
  }
}

将其链接到我的 HTML:<link href="style.css" type="text/css" rel="stylesheet">

...并在 Chrome 中遇到以下错误:

结果:它是原始 SCSS 代码，包含在标记为 CSS 的源中，因此浏览器将其解释为 CSS

注意:包括 .scss文件而不是相同的结果。

我不太确定您的错误名称 <style> 的区别。作为源(在图片右上角)。但是，如果您单击浏览器中的源链接，它应该会引导您到达源。

从这里开始就没有机会跟踪错误。
所以请检查您的 CSS 源:

1. 是 .css提交正确的文件:也许您正在将 SCSS 写入 CSS 文件中，而该文件当然无法编译。当您设置项目并在创建 SCSS 文件时拼写错误时，可能会发生这种情况。

2. 也许该代码已添加到 <style>头部或正文中的标签(由模块或其他内容添加)或者是否标记为 <style lang="css">

...或任何其他添加/链接 css 的方法

确实最好的方法是检查所有链接的 CSS 源。
如果没有更多信息，就无法从这里完成:-(

也有可能，但对于该错误模式来说非常不典型:也许再次检查您的 SASS 编译器......如果它是阻止它编译的未知问题。