Добавление Bootstrap SASS на страницы Jekyll / GitHub

Как я могу добавить SASS Bootstrap в свой проект Jekyll, чтобы он работал на страницах GitHub?

Это не дубликат этого вопроса: Добавление Bootstrap в Jekyll. Этот вопрос не имеет ничего общего с GitHub Pages, и в ответах упоминается использование Bower, которое, как мне кажется, GitHub Pages не поддерживает.

Это не работает:

---
---
// This is at "/assets/css/site.scss"
@import "bootstrap";

Я получаю такую ​​ошибку:

File to import not found or unreadable: bootstrap

Я пробовал bundle add bootstrap, но это ничего не меняет.

Я могу использовать npm install bootstrap и заставить Jekyll извлекать необходимые вещи из node_modules/bootstrap на инструкции на этом сайте, и он работает на моей машине, но это не подходящее решение для GitHub Pages, потому что GitHub Pages не использует npm.

есть ли обновления для этого?

chia yongkang 24.01.2020 08:39

@chiayongkang Извините, у меня нет обновлений. Если GitHub Pages не начал использовать npm или что-то в этом роде, то, возможно, единственным решением является включение node_modules в систему управления версиями, чтобы GitHub Pages могли его видеть. Не очень приятное решение, если вы спросите меня :( Я как бы перешел к другим проектам, поэтому я особо не исследовал это с 2018 года

Matt Thomas 24.01.2020 22:58
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
2
780
1

Ответы 1

Сначала вам нужно убедиться, что в вашем sass-файле начальной загрузки не добавлены две строки из 3 тире, поэтому в bootstrap.scss удалите это.

---
---

После этого откройте ваш файл config.yml и добавьте следующие строки, я рекомендую добавить папку на корневом уровне под названием scss/ со всеми вашими файлами scss (здесь это немного расплывчато, для меня это сработало лучше всего, потому что есть множество сообщений предлагая это таким образом, поскольку иногда Jekyll :: Converters :: Scss? кажется, нарушает относительный путь).

sass:
  sass_dir: scss

И у вас должно быть хорошо работать с @import "bootstrap.scss"; в одном из ваших других scss. В других файлах вы хотите скомпилировать .scss в .css, поэтому обязательно включите туда две строки из 3 тире и добавьте их в свой <head> как файл .css.

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