在application.css.scss中需要声明

我想使用灯箱gem，如fancybox或彩盒。 两个gem都要求在application.css中添加这一行 

*= require colorbox-rails

这是问题所在。 我只有application.css.scss文件。 我所有的css文件都是scss文件。 我在application.css.scss中有import语句但没有* = require语句。 添加上面的行会导致错误：

“*”之后的CSS无效：期望“{”，是“= require colorb …”

这是完整的application.css.scss 

 @import "bootstrap"; @import "welcome"; @import "sessions"; @import "users"; *= require colorbox-rails

application.css.scss或application.css有点相同。 只需将application.css重命名为application.css.scss 。

至于添加该行，它需要在注释中位于顶部。 像这样： 

 /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any styles * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * *= require_self *= require colorbox-rails */ @import "bootstrap"; @import "welcome"; @import "sessions"; @import "users";

显然，我遇到了这个问题，字体文件使用我的stylesheets目录中的单个font.scss文件声明了不同的字体 – 使用sass和haml的Rails应用程序。 我曾经关注过相关问题（比如关于SO的这篇文章 ），并尝试了许多相关的解决方案，比如从字体ttf文件名中删除’ – ‘，更改font.scss文件中的url声明等。

@joshua.paling的解决方案对我有用……

  1. 将font.scss文件名更改为font.css

  2. 在application.scss文件中使用以下声明样式： 

     /* ... *= require_self *= require fonts */ # @import other files here excluding the font.css file

使用此配置，以下font-face声明仍然有效 

  @font-face { font-family: PT Serif; src: url('PT_SerifWebRegular.ttf') format("truetype"); }
Interesting Posts