Search code examples
ruby-on-railssassfancyboxcolorbox

Require statement in application.css.scss


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

Solution

  • 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";