Требовать утверждение в application.css.scss

Я хочу использовать лайтбокс, например, fancybox или color box. Оба драгоценных камня просят добавить эту строку в application.css

 *= require colorbox-rails

Вот проблема. У меня только файлы application.css.scss. Все мои файлы css - это scss файлы. У меня есть инструкции import в приложении application.css.scss, но нет * = require. Добавление вышеприведенной строки приводит к ошибке:

Неверный CSS после "*": ожидается "{", was "= require colorb..."

Здесь полный application.css.scss

@import "bootstrap";
@import "welcome";
@import "sessions";
@import "users";


*= require colorbox-rails

Ответы

Ответ 1

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

Ответ 2

Явным образом, у меня была эта проблема с файлами шрифтов, объявляющими разные шрифты с использованием одного файла font.scss в моем каталоге стилей (приложение Rails с использованием sass и haml). Я выполнил связанные с этим проблемы (например, эту статью на SO) и попробовал ряд связанных решений, таких как удаление '-' из шрифта ttf filename, изменение объявлений URL в font.scss и т.д.

Решение

@joshua.paling работало для меня...

  • Измените имя файла font.scss на font.css

  • используйте следующий стиль объявления в файле application.scss:

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

И с этой конфигурацией все еще работали следующие объявления шрифтов

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