Using Bootstrap in Shopify Themes

That in itself isn't a problem. Issues arise when you need to make configuration changes to the SCSS compiler itself or need a different version of the compiler.

My standard configuration is to try and use Shopify's compiler as little as possible. I develop locally, and use WebPack to build my own SCSS and JavaScript out as I want, and then deploy that into the /assets/ folder.

Often though, I need to manipulate or override an existing theme or set of styles, so need to include my own SCSS within the bottom of the main SCSS file and have it recompile using Shopify's compiler.

Using Bootstrap

If you've ever tried using Bootstrap 4 with Shopify you'll have probably encountered the following error.

Invalid CSS after " -": expected number or function, was "-blue: #007bff;" at 29

To explain this error a little; later versions of CSS have variables, similar to those used in SCSS. The different is in the syntax. In this instance it's defining my blue colour:

--blue: #007bff;

Shopify's SCSS compiler doesn't recognise these CSS variables, and dies at the sight of the syntax.

There's no easy fix for this beyond removing those lines of code. To my knowledge, they're there out of convenience for you to use if you need them, they aren't used by Bootstrap itself.

The full section/element causing the issues is :root:

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Removing the problem code

Obviously you don't want to have to go digging around the compiled file to find the problem lines and remove them.

Unfortunately there's no special function or selector in SCSS that allows you to delete a selector previously defined.

Instead, we need to use a postCss package to retrospectively remove selector rules from our compiled SCSS.

The package I used is postcss-remove-selectors. Usage is straightforward:

require('postcss-remove-selectors')({
    selectors: [
        ':root'
    ]
})

Just for reference, below is my full options block for the sass compilation in WebPack:

options({
    autoprefixer: false,
    postCss: [
        require('autoprefixer')({
            remove: false,
            browsers: ['last 2 version', 'safari 5', 'ie 6', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'ios 7', 'ios 8', 'ios 9', 'android 4'],
        }),
        require('postcss-flexbugs-fixes')(),
        require('postcss-remove-selectors')({
            selectors: [
                ':root'
            ]
        })
    ],
})