如何在 slate 主题中添加 bootstrap 4 scss

Question

我正在使用 slate 创建 Shopify 主题，我想在我的主题中添加 bootstrap 4 SCSS
我已经通过在 styles/vendor/bootstrap 文件夹中添加引导程序的 SCSS 文件夹并将其导入到 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

谁能解决这个问题？或在 slate 主题中导入 bootstrap 4 的任何其他方法

Answer 1

@import 在 SASS 文件中不受 Shopify 支持。 您必须在 Theme.liquid 布局中单独加载文件。

Answer 2

您需要使用 url() 方法 @import 每个文件，因为 Slate 无法解析正常的 sass 文件导入。不要忘记，这也适用于 Bootstrap 包含的所有使用此方法的 mixins 和实用程序。

简答

将 bootstrap.scss、mixins.scss 和 utility.scss 中的导入复制到 /your-theme-root/src/styles/theme.scss 并调整导入语法和路径。

示例

以下示例假定您已将 bootstrap/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');