Переопределить Bootstrap 4 цвета в проекте PyCharm Django - Ошибка: не удается найти таблицу стилей для импорта - PullRequest
Новая
       31

Переопределить Bootstrap 4 цвета в проекте PyCharm Django - Ошибка: не удается найти таблицу стилей для импорта

0 голосов
/ 11 марта 2020

Я пытаюсь импортировать Bootstrap 4 файл bootstrap .s css, как описано в документации Bootstrap . Моя IDE это PyCharm. Моя конечная цель - переопределить цвета Bootstrap 4, импортировав bootstrap и переписав определенные аспекты, которые я хочу.

Проблема в том, что я не могу импортировать bootstrap.scss в мой файл custom.scss относительно каталога node_modules в моем проекте.

Вот структура моего проекта: 

learnsass
  - learnsass <-- main Django project files (ex: settings.py)
  - myapp
    - static
      - myapp
        - css
          - custom.scss      <-- file I'm trying to import bootstrap from
            - custom.css         <-- automatically generated from file watcher
            - custom.css.map     <-- automatically generated from file watcher
    - ...
  - node_modules
    - bootstrap
      - dist
      - js
      - scss
        - bootstrap.scss     <-- the bootstrap scss I'm trying to import in custom.scss
        - ...
    - jquery
    - popper.js
  - static
  - templates
  - venv
  - db.sqlite3
  - manage.py
  - package.json
  - package-lock.json

custom.s css

My custom.s Файл css выглядит следующим образом. 

$theme-colors: (
  "primary": #cccccc,
  "danger": #840383,
);
@import "~bootstrap/scss/bootstrap";

Терминал с выходным сообщением показывает «Ошибка: не удается найти таблицу стилей для импорта». 

cmd.exe /D /C call C:\Users\Jarad\AppData\Roaming\npm\sass.cmd custom.scss:custom.css
Error: Can't find stylesheet to import.
  ╷
5 │ @import "~bootstrap/scss/bootstrap";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  custom.scss 5:9  root stylesheet

Process finished with exit code 65

Я пробовал установить node_modules root в качестве каталога "Resource Root". Я даже пытался установить его подкаталоги как «Resource Root» или «Sources Root», но ни одна комбинация, которую я пробовал, не сработала.

В PyCharm я создал File Watcher, поэтому s css автоматически компилируется в пользовательские. css. Это были мои настройки там. Может быть, я здесь что-то не так делаю?

enter image description here

Я нашел одно решение, которое работает (используйте полный абсолютный путь)

I заметил, что если я использую полный абсолютный путь на моей машине Windows (см. ниже), он действительно работает (пользовательский файл. css генерируется со всеми Bootstrap css): 

$theme-colors: (
  "primary": #cccccc,
  "danger": #840383,
);
@import "C:/Users/Jarad/Documents/PyCharm/learnsass/node_modules/bootstrap/scss/bootstrap.scss";

Но мне бы очень хотелось ПОНИМАТЬ, почему он не импортирует, используя относительные / sass / s css общие практики. Я не ищу быстрых решений или чего-то хакерского. Кроме того, полный импорт абсолютных URL-адресов - довольно хрупкая вещь.

1 Ответ

0 голосов
/ 12 марта 2020

Причина, по которой я получил Error: Can't find stylesheet to import., заключается в том, что я не осознавал критическую вещь - Bootstrap @imports из custom.scss относительно , где custom.scss существует в вашем проекте.

С UX Pl anet:

Примечание: пути Bootstrap @import относительно пользовательских .s css, и будет варьироваться в зависимости от среды вашего проекта.

Когда вы делаете @import, вам нужно определить путь из custom.s css до Bootstrap .s css местоположение.

Несколько примеров: 

# custom.scss lives inside static/project/scss/
@import "../../../node_modules/bootstrap/scss/bootstrap";

# custom.scss lives inside node_modules
@import "bootstrap/scss/bootstrap";

# custom.scss lives inside the root of the project
@import "node_modules/bootstrap/scss/bootstrap";
...