33

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
user2511030
  • 505
  • 1
  • 4
  • 14

2 Answers2

59

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";
joshua.paling
  • 12,854
  • 3
  • 38
  • 57
  • 2
    Shouldn't use *= require_anything in sass/scss file? – mei Jun 09 '16 at 16:49
  • As @masaaki says, is this a bad practice to mix/match requires/import? – James L. Aug 21 '17 at 18:05
  • 1
    @masaaki why dont you give an alternate answer then. I am a noob but I dont know what to do now because of your comments. – orange14 Jun 18 '18 at 11:47
  • 3
    @orange14 above solution will work just fine. Don't be put off. Some might consider it tidier to pull all those `@imports` down the bottom into a separate file like `my_files.css.scss` and then add an extra line `*= require my_files`. The `@import` lines are SCSS and the `*= require` lines are rails-specific stuff, not SCSS. So, maybe it's kinda tidier to keep them separate, but it doesn't matter too much either way. I don't bother separating them. – joshua.paling Jun 18 '18 at 12:05
  • Thanks @joshua.paling, I have no application.css file in my project but an application.scss. In every tutorial online they tell me to add a *= require my_files. So I am adding everything in anpplication.scss. Dont know if this is the way to go since I am a noob but thanks for your prompt response.Your response helps a lot. – orange14 Jun 18 '18 at 12:12
0

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 ...

  1. Change the font.scss file name to font.css

  2. 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");
 }
Community
  • 1
  • 1
jjk
  • 516
  • 7
  • 15
  • 1
    If the other answer worked for you, the appropriate behavior is to upvote their answer, not post a new answer indicating that it worked. – cimmanon Apr 11 '16 at 10:10
  • 1
    Which I did, but this is related and worth posting. Bad form to down vote an attempt to tie a similar error to multiple causes and save someone the three hours I took to solve my problem. Explicitly, I did not get to this answer by looking for font-face related problems, or by looking for SASS / CSS issues. SO is not just about answers, but about solutions. – jjk Apr 11 '16 at 18:41
  • 5
    No, it's about solving the problem that was asked. No one asked about font-face, so it looks like you're posting a mix of "thanks joshua.paling!" with answering another question entirely. Just because you solved a problem with the aid of another answer doesn't mean you should go posting random answers where they don't belong. – cimmanon Apr 11 '16 at 18:54