Question

我正在使用slate创建Shopify主题，我想在我的主题中添加bootstrap 4 SCSS 我通过在styles/vendor/bootstrap文件夹中添加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

任何人都可以为此解决问题吗？或者在平板主题中导入引导程序4的任何其他方法

Answer 1

SASS文件中的 Shopify 不支持

@import。您必须在 Theme.liquid 布局中单独加载文件。

Answer 2

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

简答

将bootstrap.scss，mixins.scss和utilities.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');

如何在平板主题

2 个答案: