color-contrast found no color leads to compilation failure

[bluesurfer]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I am using Webpack to compile Bootstrap. Everything works just fine. But when inside a Docker container based on image node-24.8-bookworm-slim the compilation fails because color-contrast found "no color leading to 4:1 contrast ratio against #0d6efd".

That warning leads to this compilation error:

24.36 $color1: null is not a color.
24.36     ╷
24.36 846 │ $btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
24.36     │                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
24.36     ╵

I am on a Mac with M2 chip and platform: linux/x86_64 defined in the compose file.

Tried to hardcode $btn-link-focus-shadow-rgb: 0,0,0 !default but then compilation stucks at ~40% with no error message.

Reduced test cases

Followed the Webpack docs to setup webpack here's the dockerfile

FROM --platform=linux/amd64 docker.io/node:24.8-bookworm-slim AS client-builder

ARG APP_HOME=/app
WORKDIR ${APP_HOME}

COPY ./package.json ${APP_HOME}
RUN npm install && npm cache clean --force

COPY . ${APP_HOME}
RUN npm run build

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

5.3.8

[bluesurfer]

Update:

the guilty is platform=linux/amd64.

Tested on this example https://github.com/twbs/examples/tree/main/webpack

[DenisLopatin]

Tried to hardcode $btn-link-focus-shadow-rgb: 0,0,0 !default but then compilation stucks at ~40% with no error message.

Does this happen once or have there been several attempts?

There must be some logs. Maybe they just need to be found. If you find the logs, you'll find the problem.

I do not know what kind of library issues this warning, but you should understand this. You need to review the repositories of this library and determine the system dependencies for it. Considering that the slim version may not have them. In other words, you need to set them for the container.

[DenisLopatin]

Here you can change the docker image and try again, if everything goes well, then you need to compare the two images. Well, that is, node-24.8-bookworm-slim version and node-24.8-bookworm. I haven't worked with this functionality myself, it's just thinking out loud. Maybe it will help.

[mdo]

Unsure what's happening here, unless the compiler is different than Dart or Node Sass in some way? Do you have a Stackblitz example or something that shows your setup (how you're importing Bootstrap, how you're modifying it, etc)?

[bluesurfer]

Thanks for your replies.

This is a very weird bug. Removing the flag platform=linux/amd64 fixes the color-contrast problem (but opens others for my project - not relevant for Bootstrap though).

@mdo sorry, I am not familiar with Stackblitz. I created this repository which is literally a duplicate of the webpack example.

I just added Dockerfile which should replicate the issue. If you try to build that (docker build .) you should get the null is not a color bug.

If you have time to investigate on this, I am happy to help otherwise this ticket to me is closed.