Rails: Почему моя собственная таблица стилей не переопределяет семейство шрифтов?

У меня в приложении есть шаблонный CSS Скелет. Он живет в app/assets/stylesheets.

app/assets/stylesheets
├── application.css
├── custom.scss
├── normalize.css
└── skeleton.css

Skeleton использует семейство шрифтов без засечек (с Raleway наверху). Я хочу отменить это.

Итак, мой собственный файл SCSS выглядит так:

@import "skeleton";

body {
  font-family: serif;
}

main {
  @extend .container;
}

Но шрифт остается без засечек.

Теперь я считаю, что мой пользовательский файл SCSS загружается до Skeleton, потому что без @import "skeleton"@extend .container (.containter определен в Skeleton) не работает.

Я пробовал требовать custom.scss последним в application.css вот так:

 *= require_tree .
 *= require_self
 *= require custom

и вот так со Skeleton и связанным с ним листом нормализации:

 *= require_tree .
 *= require_self
 *= require normalize
 *= require skeleton
 *= require custom

Но все же я считаю, что мне нужно импортировать Skeleton в свой собственный файл, и я не могу переопределить семейство шрифтов без использования !important.

Что происходит? Правильно ли я полагаю, что моя пользовательская таблица стилей загружается до Skeleton? Как убедиться, что моя таблица стилей загружается в последний раз?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
81
2

Ответы 2

Простым взломом может быть переименование таблицы стилей как-то вроде z.css - таким образом, когда таблицы стилей загружаются в алфавитном порядке, они загружаются в конце. Не верный способ, а хак.

Я не пробовал, но подозревал, что это может сработать. Я бы хотел сделать это только в крайнем случае.

user3574603 25.08.2018 01:10

"require_tree." требуются все файлы css в текущем каталоге, попробуйте удалить эту строку

*= require normalize
*= require skeleton
*= require custom
*= require_self

Кроме того, я думаю, что если вы используете @import в custom.scss, вам не нужно добавлять его в манифест конвейера ресурсов, поскольку прекомпилятор sass позаботится об этом

*= require normalize
*= require custom
*= require_self

Лично мне не нравится смешивать @ import из scss с декларациями манифеста из конвейера ресурсов, потому что труднее понять, что и куда помещает.

Другие вопросы по теме