Twitter bootstrap 如何在slate主题中添加bootstrap 4 SCS

我正在使用slate创建Shopify主题，我想在我的主题中添加bootstrap 4 SCS
我尝试过在

style/vendor/bootstrap

文件夹中添加bootstrap的SCSS文件夹，并将其导入

theme.SCSS

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

问题是，在包含此

slate构建之后，它成功完成了
，但在控制台中出现了一个错误

 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

有人能找到解决办法吗？SASS文件中的Shopify不支持在slate主题中导入引导4的任何其他方法。
您必须在主题中单独加载文件。liquid布局。
@import
不受SASS文件中的Shopify支持。
您必须在Theme.liquid布局中单独加载文件。
您需要使用url（）方法@import每个文件，因为Slate无法解析正常的sass文件导入。不要忘记，这也适用于Bootstrap包含的使用此方法的所有mixin和实用程序

简短回答

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

示例

下面的示例假设您已将bootstrap/scss的全部内容复制到/your-theme-root/src/styles/vendor/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');

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

简短回答

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

示例

下面的示例假设您已将bootstrap/scss的全部内容复制到/your-theme-root/src/styles/vendor/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');

你能考虑禁用严格的MIME检查吗？我不知道如何禁用严格的MIME检查作为一个工作，你可以把这个SCSS文件（）或这个CSS文件（）直接在你的供应商文件夹中。它不工作你能考虑禁用严格的MIME检查吗？我不知道如何禁用严格的MIME检查作为一个工作，您可以将此scss文件（）或此css文件（）直接包含在您的供应商文件夹中。它不起作用。我已经尝试过此方法，但它编译成功，但在上载后，当我打开我的应用商店时，在主题中没有CSS应用，在控制台中它给出MIME类型错误，正如我在问题中提到的。我已经试过了，它编译成功，但上传后，当我打开我的商店时，在主题中没有CSS应用，在控制台中它给出MIME类型错误，正如我在问题中提到的