WordPress加载.SCSS而不是.CSS

时间:2015-10-15 19:49:18

标签: sass map-files

我最近在我的新电脑上启动并运行了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。发生了什么事?

Developer Tools showing .scss - but the .css file is loaded correctly

它可能适用于调试等 - 但是在使用这样的嵌套样式时遇到问题:

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

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

顺便说一句,我正在使用安装了自动编译器的Brackets(效果很好)。

我希望有人可以帮助我!

提前致谢!

1 个答案:

答案 0 :(得分:1)

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

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

h1 {
   font-size: $h1-size;

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

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

希望它可以帮助像我这样的其他时间编码疲惫的人。我现在要去睡觉了:D