0

スレートを使用して Shopify テーマを作成しています。自分のテーマにブートストラップ 4 SCSS を追加したいのですが、ブートストラップの SCSS フォルダーをフォルダーに追加してインポートすることで
これを試しました。styles/vendor/bootstraptheme.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 をインポートするためのその他の方法

4

2 に答える 2

1

Slate は通常の sass ファイルのインポートを解析できないため、url() メソッドを使用して各ファイルを @import する必要があります。これは、この方法を使用して Bootstrap に含まれるすべての mixin とユーティリティにも適用されることを忘れないでください。

簡潔な答え

インポートを bootstrap.scss、mixins.scss、utilities.scss から /your-theme-root/src/styles/theme.scss にコピーし、インポートの構文とパスを調整します。

例

次の例では、Bootstrap リポジトリ全体を含めるのではなく、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');
于 2018-04-02T19:59:36.267 に答える