Как я могу добавить bootstrap 4 scss в тему сланца

Question

Я создаю тему Shopify с использованием сланца, я хочу добавить в мою тему загрузчик 4 SCSS
Я попробовал это, добавив папку SCSS загрузчика в styles/vendor/bootstrap папку и импортировать ее в theme.scss

/*================ BOOTSTRAP ================*/
@import url('vendor/bootstrap/scss/bootstrap.scss');

проблема в том, что после включения этого slate build успешно сделано но выдает ошибку в консоли

 Refused to apply style from 'https://cdn.shopify.com/s/files/1/2331/3377/t/10/assets/theme.scss.css?9739733336988663236' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

и когда я открываю CSS это показывает

Failed to compile SCSS file

Может у кого-нибудь есть решение для этого? или любой другой метод для импорта начальной загрузки 4 в сланцевой теме

Answer 1

@import Shopify не поддерживается в файлах SASS. Вы должны загрузить свой файл отдельно в макете Theme.liquid.

Answer 2

Вам нужно будет @import каждого файла, используя метод url(), так как Slate не может анализировать импорт файлов sass. Не забывайте, что это относится ко всем миксинам и утилитам, которые Bootstrap включает в себя и этот метод.

Короткий ответ

Скопируйте импорт из bootstrap.scss, mixins.scss и utilities.scss в /your-theme-root/src/styles/theme.scss и настройте синтаксис и пути импорта.

пример

В следующем примере предполагается, что вы скопировали все содержимое начальной загрузки / scss в / your-theme-root / src / styles / vendor / bootstrap, а не включили весь репозиторий Bootstrap - вам потребуется вставить / scss / для следующего работать с вашими текущими путями.

Изменить это:

/*================ BOOTSTRAP ================*/
@import url('vendor/bootstrap/scss/bootstrap.scss');

К этому:

/*================ Bootstrap 4 ================*/

@import url('vendor/bootstrap/_functions.scss');
@import url('vendor/bootstrap/_variables.scss');

/* == MIXINS :: direct import
 * @import url('vendor/bootstrap/_mixins.scss');
 */
    // Utilities
    @import url('vendor/bootstrap/mixins/_breakpoints.scss');
    @import url('vendor/bootstrap/mixins/_hover.scss');
    @import url('vendor/bootstrap/mixins/_image.scss');
    @import url('vendor/bootstrap/mixins/_badge.scss');
    @import url('vendor/bootstrap/mixins/_resize.scss');
    @import url('vendor/bootstrap/mixins/_screen-reader.scss');
    @import url('vendor/bootstrap/mixins/_size.scss');
    @import url('vendor/bootstrap/mixins/_reset-text.scss');
    @import url('vendor/bootstrap/mixins/_text-emphasis.scss');
    @import url('vendor/bootstrap/mixins/_text-hide.scss');
    @import url('vendor/bootstrap/mixins/_text-truncate.scss');
    @import url('vendor/bootstrap/mixins/_visibility.scss');

    // // Components
    @import url('vendor/bootstrap/mixins/_alert.scss');
    @import url('vendor/bootstrap/mixins/_buttons.scss');
    @import url('vendor/bootstrap/mixins/_caret.scss');
    @import url('vendor/bootstrap/mixins/_pagination.scss');
    @import url('vendor/bootstrap/mixins/_lists.scss');
    @import url('vendor/bootstrap/mixins/_list-group.scss');
    @import url('vendor/bootstrap/mixins/_nav-divider.scss');
    @import url('vendor/bootstrap/mixins/_forms.scss');
    @import url('vendor/bootstrap/mixins/_table-row.scss');

    // // Skins
    @import url('vendor/bootstrap/mixins/_background-variant.scss');
    @import url('vendor/bootstrap/mixins/_border-radius.scss');
    @import url('vendor/bootstrap/mixins/_box-shadow.scss');
    @import url('vendor/bootstrap/mixins/_gradients.scss');
    @import url('vendor/bootstrap/mixins/_transition.scss');

    // // Layout
    @import url('vendor/bootstrap/mixins/_clearfix.scss');
    // @import url('vendor/bootstrap/mixins/_navbar-align.scss');
    @import url('vendor/bootstrap/mixins/_grid-framework.scss');
    @import url('vendor/bootstrap/mixins/_grid.scss');
    @import url('vendor/bootstrap/mixins/_float.scss');

@import url('vendor/bootstrap/_root.scss');
@import url('vendor/bootstrap/_reboot.scss');
@import url('vendor/bootstrap/_type.scss');
@import url('vendor/bootstrap/_images.scss');
@import url('vendor/bootstrap/code.scss');
@import url('vendor/bootstrap/_grid.scss');
@import url('vendor/bootstrap/_tables.scss');
@import url('vendor/bootstrap/_forms.scss');
@import url('vendor/bootstrap/_buttons.scss');
@import url('vendor/bootstrap/_transitions.scss');
@import url('vendor/bootstrap/_dropdown.scss');
@import url('vendor/bootstrap/_button-group.scss');
@import url('vendor/bootstrap/_input-group.scss');
@import url('vendor/bootstrap/_custom-forms.scss');
@import url('vendor/bootstrap/_nav.scss');
@import url('vendor/bootstrap/_navbar.scss');
@import url('vendor/bootstrap/_card.scss');
@import url('vendor/bootstrap/_breadcrumb.scss');
@import url('vendor/bootstrap/_pagination.scss');
@import url('vendor/bootstrap/_badge.scss');
@import url('vendor/bootstrap/_jumbotron.scss');
@import url('vendor/bootstrap/_alert.scss');
@import url('vendor/bootstrap/_progress.scss');
@import url('vendor/bootstrap/_media.scss');
@import url('vendor/bootstrap/_list-group.scss');
@import url('vendor/bootstrap/_close.scss');
@import url('vendor/bootstrap/_modal.scss');
@import url('vendor/bootstrap/_tooltip.scss');
@import url('vendor/bootstrap/_popover.scss');
@import url('vendor/bootstrap/_carousel.scss');

/* == MIXINS :: direct import
 * @import url('vendor/bootstrap/_utilities.scss');
 */
    @import url('vendor/bootstrap/utilities/_align.scss');
    @import url('vendor/bootstrap/utilities/_background.scss');
    @import url('vendor/bootstrap/utilities/_borders.scss');
    @import url('vendor/bootstrap/utilities/_clearfix.scss');
    @import url('vendor/bootstrap/utilities/_display.scss');
    @import url('vendor/bootstrap/utilities/_embed.scss');
    @import url('vendor/bootstrap/utilities/_flex.scss');
    @import url('vendor/bootstrap/utilities/_float.scss');
    @import url('vendor/bootstrap/utilities/_position.scss');
    @import url('vendor/bootstrap/utilities/_screenreaders.scss');
    @import url('vendor/bootstrap/utilities/_sizing.scss');
    @import url('vendor/bootstrap/utilities/_spacing.scss');
    @import url('vendor/bootstrap/utilities/_text.scss');
    @import url('vendor/bootstrap/utilities/_visibility.scss');

@import url('vendor/bootstrap/_print.scss');