Как перезаписать переменные Bootstrap SCSS для моего сайта django с помощью PyCharm?

Я использую PyCharm для управления файлами django, а для фронт-энда я использую Bootstrap. В настоящее время я использую метод CDN для указания на файлы bootstrap в моем файле base.html.

Недавно я пришел к тому, что хочу настроить некоторые переменные SCSS, которые предоставляет bootstrap, но я озадачен и нигде не могу найти руководство, как это сделать с моей конфигурацией.

Я использовал npm для установки файлов bootstrap в папку моего внешнего проекта. Я попробовал установить django-sass-compiler с помощью pip, а затем добавить нужный параметр в settings.py, но когда я выполнил команду "python manage.py sass-compiler" (согласно документации PyPi), я получил "ModuleNotFoundError: No module named 'django_sass_compiler'"

Я предполагаю, что если бы мне удалось заставить его работать, то он бы скомпилировал мой пользовательский SCSS файл в CSS файл, который бы перезаписал мой текущий 'main.css' (это правильно?), однако я даже не могу понять эту часть.

Если кто-то может указать мне правильное направление, то это было бы здорово, здесь действительно не так много помощи для sass, pycharm, django & bootstrap вместе.

Да, вам придется компилировать CSS вручную. Вы можете использовать такие инструменты, как Koala. Чтобы сделать это в Django, вам нужно:

  • Создайте каталог с именем static в каталоге уровня вашего проекта. В satic добавьте еще одну папку под названием css. Перейдите и добавьте скомпилированный файл CSS.
  • Change
STATIC_URL = 'static/'

to

STATIC_URL = '/static/'

и добавить

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
  • В вашем файле base.html в самом верху добавьте 
{% load static %}

и вы можете связать файл base.html с вашим скомпилированным CSS файлом, как показано ниже:

<link rel="stylesheet" href="/static/css/mycss.css">

Для тех, кому интересно, как я это исправил

Проблема была не в bootstrap! Мои цвета на самом деле переписывали стили bootstrap, однако я не мог видеть изменений, потому что браузер кэшировал часть информации.

Переход к F12 -> Настройки сети -> Отключить кэш устранил проблему.

Вернуться на верх