Arhn - архитектура программирования

Требуется заявление в application.css.scss

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

 *= require colorbox-rails

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

Недопустимый CSS после «*»: ожидалось «{», было «=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";
02.10.2014
  • Не следует использовать *= require_anything в файле sass/scss? 09.06.2016
  • Как говорит @masaaki, это плохая практика смешивания/сопоставления требований/импорта? 21.08.2017
  • @masaaki, почему бы тебе тогда не дать альтернативный ответ. Я нуб, но я не знаю, что теперь делать из-за ваших комментариев. 18.06.2018
  • @orange14 вышеприведенное решение будет работать нормально. Не откладывайте. Кто-то может счесть более аккуратным вытащить все эти @imports внизу в отдельный файл, например my_files.css.scss, а затем добавить дополнительную строку *= require my_files. Строки @import относятся к SCSS, а строки *= require относятся к рельсам, а не к SCSS. Так что, может быть, будет более аккуратно держать их отдельно, но в любом случае это не имеет большого значения. Я не забочусь о том, чтобы разделить их. 18.06.2018
  • Спасибо @joshua.paling, у меня в проекте нет файла application.css, но есть файл application.scss. В каждом онлайн-уроке мне говорят добавить *= require my_files. Поэтому я добавляю все в anpplication.scss. Не знаю, правильный ли это путь, так как я нуб, но спасибо за ваш быстрый ответ. Ваш ответ очень помогает. 18.06.2018

  • 2

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

    Решение @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");
     }
    
    11.04.2016
  • Если другой ответ сработал для вас, правильно будет проголосовать за его ответ, а не публиковать новый ответ, указывающий, что он сработал. 11.04.2016
  • Что я и сделал, но это связано и стоит публикации. Плохой тон, чтобы проголосовать против попытки связать аналогичную ошибку с несколькими причинами и сэкономить кому-то три часа, которые я потратил на решение своей проблемы. Явно я не получил этот ответ, ища проблемы, связанные с шрифтом, или ища проблемы SASS/CSS. SO — это не только ответы, но и решения. 11.04.2016
  • Нет, речь идет о решении проблемы, которую задали. Никто не спрашивал о font-face, так что похоже, что вы публикуете смесь благодарностей joshua.paling! с ответом на другой вопрос совсем. То, что вы решили проблему с помощью другого ответа, не означает, что вы должны публиковать случайные ответы там, где они неуместны. 11.04.2016
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..