Yarn build:production fails on Bootstrap compilation

Bart · January 17, 2022, 5:10pm

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 · January 17, 2022, 5:27pm

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

github.com

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

### 9.1.0: TBD, 2021
* Update Webpack v3 to v5
* Update Node dependencies
* Minor change: Paths (as `@import`s) in assets are now resolved relative to `resources/` directory, instead to the entrypoint stylesheet (main.scss).

### 9.0.10: November 9th, 2020
* Update Node dependencies ([#2572](https://github.com/roots/sage/pull/2572))
* Composer 2 compatibility ([#2569](https://github.com/roots/sage/pull/2569))

### 9.0.9: February 13th, 2019
* Update to Bootstrap 4.3.1 ([#2153](https://github.com/roots/sage/pull/2153))

### 9.0.8: February 11th, 2019
* Update to Bootstrap 4.3.0 ([#2152](https://github.com/roots/sage/pull/2152))
* Filter template hierarchy for embed templates ([#2145](https://github.com/roots/sage/pull/2145))
* Decrease optipng level ([#2143](https://github.com/roots/sage/pull/2143))
* Unescape post titles ([#2141](https://github.com/roots/sage/pull/2141))

### 9.0.7: December 28th, 2018
* Update sage-installer which now allows to opt-in for sending framework selection data ([#2137](https://github.com/roots/sage/pull/2137))

This file has been truncated. show original

It fixes a lot of build issues.

Bart · January 17, 2022, 6:12pm

I came across this post:

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 · January 17, 2022, 6:24pm

See this guide for updating an existing Sage 9 theme:

e class='quote' data-post="1" data-topic="20067">

Sage "9.1": Please test sage

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 · January 17, 2022, 6:44pm

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

Bart · January 17, 2022, 7:11pm

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 · January 17, 2022, 7:13pm

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 · January 17, 2022, 7:21pm

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