问题:

I want to use a lightbox gem such as fancybox or color box. Both gems ask to add this line in the application.css

 *= require colorbox-rails

Here's the problem. I only have application.css.scss files. All my css files are scss files. I have import statements in the application.css.scss but no *=require statements. Adding the above line results in the error :

Invalid CSS after "*": expected "{", was "=require colorb..."

Here's the complete application.css.scss

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

回答1:

application.css.scss or application.css are kinda the same. Just rename your application.css to application.css.scss.

As for adding that line, it'll need to be right up the top, in a comment. Like this:

/*  * 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";

回答2:

Explicitly, I had this issue with fonts files declaring different font-faces using a single font.scss file in my stylesheets directory (Rails app using sass and haml). I had followed related issues (like this article on SO) and had tried a number of related solutions like removing '-' from font ttf filename, changing the url declarations in the font.scss file, etc.

@joshua.paling's solution worked for me ...

Change the font.scss file name to font.css

utilize the following declaration style in the application.scss file:

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

And with this configuration the following font-face declarations still worked

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

转载请标明出处:Require statement in application.css.scss

文章来源: Require statement in application.css.scss

标签

require