Error: Error building site: TOCSS: failed to transform "main/scss/main.css" (text/css)" Undefined variable: "$utilities-border-colors

[ericcsinger]

Describe the bug
In attempting to upgrade my theme from something in the v.7x to v0.79 everything seems to work fine other than the warning message below. the snippet below. However, when taking it from v0.79 to v0.80.2, i then get the error message in the snippet and the build fails.

Start building sites …
hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66+extended windows/amd64 BuildDate=2022-06-16T07:09:16Z VendorInfo=gohugoio
WARNING: calling IsSet with unsupported type "bool" (bool) will always return false.
Error: Error building site: TOCSS: failed to transform "main/scss/main.css" (text/css): "rootDevFolder/node_modules/bootstrap/scss/_utilities.scss:142:15": Undefined variable: "$utilities-border-colors".

To Reproduce
Steps to reproduce the behavior:

1. Started with a clean set of NPM packages. By deleting "node_modules"
2. Ran hugo mod npm pack
3. Ran npm install
4. Ran npm audit fix --force This updated mermaid to the latest version as well as it's dependency

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated @braintree/sanitize-url@3.1.0: Potential XSS vulnerability patched in v6.0.0.

added 487 packages, and audited 488 packages in 36s

50 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating mermaid to 9.1.4, which is a SemVer major change.

changed 4 packages, and audited 488 packages in 1s

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Expected behavior
Hoping my website would complete it's build :-)

Hugo version:

hugo v0.101.0-466fa43c16709b4483689930a4f9ac8add5c9f66

Theme version:

v0.80.2

Desktop (please complete the following information):

• Windows 10

• N/A at this point

• Repository URL(optional):

• Live Site URL(optional):Additional context
  Add any other context about the problem here.

• Repository URL(optional):

• Live Site URL(optional):

[razonyang]

Hi, I think you're using Bootstrap v5.2.0 which is unsupported by v0.80.*, could you please confirm this by package.json and package-lock.json?
https://github.com/razonyang/hugo-theme-bootstrap/blob/v0.80.2/package.json#L51.

BTW, The v0 keeps the older design and fixed with Bootstrap v5.1.3. And the v1.0.0 -alpha.* relies on the Bootstrap experimental branch, the v1.0.0 will be released after the branch was merged.

[ericcsinger]

Ok I'm starting to see what's going on, but being that I'm a hugo / npm newbie, I'm going to defer to you.

In all your json files. While you do have something along the lines of

"bootstrap": "^5.1.3"

Here are some snippets

package.json

      4     "url": "https://github.com/razonyang/hugo-theme-bootstrap/issues"
     19         "bootstrap": "project",
     51       "bootstrap": "^5.1.3",
     68     "description": "Hugo bootstrap theme",
     73   mepage": "https://github.com/razonyang/hugo-theme-bootstrap#readme",
     78       "bootstrap",
     79       "bootstrap5"
     82     "name": "hugo-theme-bootstrap",
     85   rl": "git+https://github.com/razonyang/hugo-theme-bootstrap.git"

package.hugo.json

      2     "name": "hugo-theme-bootstrap",
      3     "description": "Hugo bootstrap theme",
     16       "bootstrap": "^5.1.3",
     44   rl": "git+https://github.com/razonyang/hugo-theme-bootstrap.git"
     50       "bootstrap",
     51       "bootstrap5"
     56     "url": "https://github.com/razonyang/hugo-theme-bootstrap/issues"
     58   mepage": "https://github.com/razonyang/hugo-theme-bootstrap#readme"

package-lock.json

      2     "name": "hugo-theme-bootstrap",
      7         "name": "hugo-theme-bootstrap",
     21           "bootstrap": "^5.1.3",
   2182       "node_modules/bootstrap": {
   2184         "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
   2188           "url": "https://opencollective.com/bootstrap"
   6905       "bootstrap": {
   6907         "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",

I'm guessing based on my Googling, that the ^ is causing NPM to automatically go from 5.1.3 to 5.2.0. Should this be changed from a "^" to maybe a "~" or maybe even an explicit 5.1.3 instead?

Here is what i see in a "silly" npm log.

68 silly fetch manifest bootstrap@^5.1.3
69 http fetch GET 200 https://registry.npmjs.org/bootstrap 45ms (cache revalidated)
116 silly placeDep ROOT bootstrap@5.2.0 OK for:  want: ^5.1.3
918 timing idealTree:node_modules/bootstrap Completed in 0ms
1983 silly audit   bootstrap: [ '5.2.0' ],
2483 timing reifyNode:node_modules/bootstrap Completed in 9898ms
3021 silly ADD node_modules/bootstrap

in that snippet the line i see that leads me to think this is what's happening is:
116 silly placeDep ROOT bootstrap@5.2.0 OK for: want: ^5.1.3

Just to be clear, these files are from me, manually copying them out of a v0.80.2 zip file, to the root of my website and then the result of running npm install is that i have bootstrap 5.2.0.

[razonyang]

Thanks for the information, I just drafted a new release v0.80.3 for fixing the Bootstrap version on older UI design.