Yarn build:production fails on Bootstrap compilation

[Bart]

Hi there,

I’m trying to yarn build:production, but I keep getting an error related to Bootstrap. I’m on Sage 9.0.10.

The error originates in bootstrap/scss/_navbar.scss on line 229. When I delete the background-image rule, the build process finishes correctly.

I’ve included Bootstrap at the top of my main.scss file. When I comment out my code and only compile Bootstrap, the error persists, so it’s not related to my own sass.

I’m confused and don’t know how to debug this problem. Any help would be greatly appreciated.

[strarsis]

You may be interested in the latest Sage 9.x version:

roots/sage/blob/9.x/CHANGELOG.md#910-tbd-2021

It fixes a lot of build issues.

[Bart]

I came across this post:

Keeping Sage Updated

This has come up a lot lately. Sage is a “starter” theme, not a theme framework or parent theme. It is designed to be modified, up to and including its core files, to build an effective and efficient custom theme for your site. If a new feature in a Sage update is absolutely vital to your site, then yes it can be challenging to merge changes from the main repository, but given how bare-bones Sage is, this is a rare occurrence. Sage doesn’t have a ton of theme functionality out of the gate; you …

How would you go about updating Sage? I’m a little afraid to break it. I’ll try it on a copy of the project, but I would not know the best way to go ahead.

Also, @ben clearly states that an update should not be necessary. So I’m wondering if it’s even necessary.

[strarsis]

See this guide for updating an existing Sage 9 theme:

Sage "9.1": Please test

Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master). Updated Sage 9.x You can now try out the Sage PR branch for webpack 5 and updated dependencies. The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now. Trying it out now! To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this set…

Well, the latest Sage 9.x updates update a lot of dependency, hence fixing lots of issues.
You don’t have to update… but sometimes it can fix the root causes.

[MWDelaney]

What is the error you’re getting? What version of Bootstrap are you trying to use?

[Bart]

Bootstrap 4.3.1 and the error is:

error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: Syntax Error 

(6813:72435) Unclosed block

When I delete the line I mentioned in my original post, the build finishes succesfully.

Edit: full output

[MWDelaney]

Have you tried updating Bootstrap to a more recent version? It sounds like Sage’s version of Sass and that version of Bootstrap disagree on some standards.

[Bart]

Upgrading Bootstrap to 4.6.1 did the trick, thanks @MWDelaney.