Добавление Bootstrap 4 в Slate V1 - получение двух индексов в Chrome Developer Tools

Question

Добавление Bootstrap 4 в Slate V1 - получение двух индексов в Chrome Developer Tools

Я новичок, когда дело доходит до веб-разработки. Я сделал некоторые разработки раньше, но не в отношении Интернета.

Я понимаю основы того, что такое CSS, что делает Javascript и основной HTML.

Я установил Slate и скачал файлы Bootstrap 4 и добавил их в новую тему Slate, созданную мной в файле theme.scss.liquid. Я добавил каждый _.scss индивидуально, как указано, чтобы сделать это в другой теме здесь.

Однако когда я делаю это, некоторые стили перестают работать, и я заметил, что есть два "индекса", когда (в chrome) я перехожу в View-> Developer-> Developer tools.

2 вопроса

1) Я предполагаю, что загружается второй "индекс", поэтому мой стиль игнорируется. Как или откуда этот второй индекс будет загружен?

2) Я предполагаю, что шифер V1 поставляется с собственным дизайном. Будет ли при этом добавляться конфликт начальной загрузки 4 scss, и, следовательно, нужно ли удалять некоторые стили или конфигурацию slate v1?

Спасибо, я понимаю, что это может быть бесполезным вопросом и требует дополнительного понимания с моей стороны.

ура

Крис

2

css bootstrap-4 shopify slate

Источник

user654378 25 авг '18 в 23:35

1 ответ

Другие вопросы по тегам css bootstrap-4 shopify slate

user4196021 26 авг '18 в 05:17 2018-08-26 05:17 · Answer 1 · 2018-08-26 05:17

Slate поставляется со скелетом scss-файлов и (очень) разреженной таблицей стилей, чтобы показать вам, как может выглядеть структура папок. Если вы новичок и просто хотите использовать bootnap, попробуйте добавить версию cdn в theme.liquid и начните добавлять разметку к вашему html за https://getbootstrap.com/

Просто CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS, Popper.js и jQuery

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>