WordPress 加载 .SCSS 而不是 .CSS答案

【问题标题】：WordPress loading .SCSS instead of .CSSWordPress 加载 .SCSS 而不是 .CSS
【发布时间】：2016-01-14 10:13:54
【问题描述】：

我最近在我的新 PC 上启动并运行了 Sass 和 WAMP，并开始在我的本地主机上开发一个新的 WordPress 站点。

但后来我注意到 WordPress 正在加载 .SCSS 文件，即使我已经在我的 functions.php 中加入了这样的 CSS 样式表：

function theme_primary_css() {
wp_enqueue_style( 'theme-styles', get_template_directory_uri().'/css/theme-styles.css' ); 
}
add_action( 'wp_enqueue_scripts', 'theme_primary_css' );

当我查看网站的源代码时，我可以看到 theme-style.css 已成功加载。但是在查看 Web Developer Tools 时，我可以看到它从 .SCSS 文件加载 CSS。怎么回事？

它可能非常适合调试等 - 但是在使用这样的嵌套样式时我遇到了问题：

h1 {
    .entry-title {
       margin-top: 0px;
    }
}

这种样式不起作用 - 可能是因为它正在加载 .scss 文件 - 但同时我在 .scss 中设置的变量工作正常（即使它加载 .scss 而不是 .css 文件 - 30px您在图片中看到的实际上是一个变量）。我很困惑！

顺便说一句，我正在使用安装了自动编译器的括号（效果很好）。

希望有人能帮帮我！

提前致谢！

【问题讨论】：

这只是 chrome 的“有用”我相信你可以关闭这个功能但我现在不记得了 - 看看谷歌
它没有加载 SCSS ......它使用地图文件来帮助你在检查器中。阅读更多in the SASS docs。

标签： sass map-files

【解决方案1】：

感谢 Steve 和 Rnevius 的帮助！你让我走上了正轨。

我的风格不起作用的原因是我在 .entry-title 课程之前错过了一个 &-sign。所以工作的 Sass 最终变成了：

h1 {
   font-size: $h1-size;

   &.entry-title {
    margin-top: 0px;
   }
}

所以，正如 Rnevius 指出的那样，它没有加载 .scss 文件 - 它只是在检查器中显示 .scss 文件以帮助我进行开发 - 这非常有帮助。所以我得出的结论是我的 CSS/Sass 是问题所在 - 是的 - 我错过了上面提到的 & 符号。现在一切正常。

希望它可以帮助像我这样的其他几个小时编码累的人。我现在要睡觉了:D

【讨论】：