Shopify Question posted in
The Shopify help center can be found here.

How can i add bootstrap 4 scss in slate theme – Shopify

I am creating Shopify theme using slate, I want to add bootstrap 4 SCSS in my theme
I have tried this by adding bootstrap’s SCSS folder in styles/vendor/bootstrap folder and import it in theme.scss

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

the issue is that after including this slate build successfully done but it gives an error in the console 

 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.

and when I open CSS it shows

Failed to compile SCSS file

Can anyone have the solution for this? or any other method for import bootstrap 4 in slate theme

Tags:

2

Answers


  1. 0

    @import is not supported by Shopify in SASS files.
    You must load your file separately in Theme.liquid layout.

    Login or Signup to reply.
  2. 0

    You will need to @import each file using the url() method since Slate can’t parse normal sass file imports. Don’t forget that this applies to all the mixins and utilities that Bootstrap includes using this method as well.

    Short Answer

    Copy the imports from bootstrap.scss, mixins.scss and utilities.scss to /your-theme-root/src/styles/theme.scss and adjust the import syntax and paths.

    Example

    The following example assumes that you have copied the entire contents of bootstrap/scss to /your-theme-root/src/styles/vendor/bootstrap rather than including the entire Bootstrap repository — you will need to insert /scss/ for the following to work with your current paths.

    Change this:

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

    To this:

    /*================ 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');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search