dart-sass error since bootstrap 5.3.3

[arnriu]

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

Since bootstrap 5.3.3, dart-sass 1.77.1 is not compiling.
If I go back to bootstrap 5.3.2, everything is fine. If I switch to original sass 1.77.1, everything is fine.

Error in console:

node:internal/url:804
    this.#updateContext(bindingUrl.parse(input, base));

TypeError: Invalid URL
    at new URL (node:internal/url:804:36)
    at removeLegacyImporterFromSpan (/project_path/node_modules/.pnpm/sass-embedded@1.74.1/node_modules/sass-embedded/dist/lib/src/legacy/utils.js:35:28)
    at newLegacyException (/project_path/node_modules/.pnpm/sass-embedded@1.74.1/node_modules/sass-embedded/dist/lib/src/legacy/index.js:253:72)
    at /project_path/node_modules/.pnpm/sass-embedded@1.74.1/node_modules/sass-embedded/dist/lib/src/legacy/index.js:24:116
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'ERR_INVALID_URL',
  input: '/project_path/node_modules/.pnpm/bootstrap@5.3.3_@popperjs+core@2.11.8/node_modules/bootstrap/scss/_variables.scss'
}

Reduced test cases

You can try this devbox with bootstrap 5.3.3. npm start fails
Now in package.json , change bootstrap to 5.3.2, then npm i && npm start. It works.

I only imported 2 files in index.sass, for minimum case. First is functions.scss which seems to be ok in both versions, second is variables.scss, which fails in 5.3.3.

https://codesandbox.io/p/devbox/competent-mahavira-4vgdjg?embed=1&file=%2Fpackage.json

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

macOS

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

No response

What version of Bootstrap are you using?

5.3.3

[arnriu]

Problem seems to happen since this commit from @julien-deramond , and more specifically, from the last line in variables.scss.
If I comment it out, everything is fine.

@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3

[mdo]

Is this still an issue? I haven't run into anything locally myself.

[arnriu]

@mdo Yes, this is still an issue. I can reproduce it on my localhost with everything up to date.
You can try it in the code sandbox I mentioned in my first post:
https://codesandbox.io/p/devbox/competent-mahavira-4vgdjg?embed=1&file=%2Fpackage.json

[julien-deramond]

I can confirm that there's an issue when launching npm run build in your reproducible environment (thanks for providing one). I encountered the exact same error.

The following worked:

1. Downloaded your project.
2. In package.json, changed the Sass version from npm:sass-embedded@1.77.1 to 1.77.1.
3. Ran npm i followed by npm run build.

I also tried changing the Node and Vite versions, but the error persisted.

The problem appears to be linked to npm:sass-embedded (even with npm:sass-embedded@latest).

Based on these elements only, I might be wrong but I'd say that our Sass files are correctly written and shouldn't need to be reverted. The issue might lie directly within npm:sass-embedded or possibly an incompatibility with the Vite configuration.

It might be useful to further isolate the issue by removing Vite from the equation and seeing if the problem persists.

If anyone from the community has time to try this, it would be greatly appreciated.

[arnriu]

I agree, the problem is not present with the regular sass package. This is why I labelled it as dart-sass, since sass-embedded is, I quote:

an alternative to the sass package. It supports the same JS API as sass and is maintained by the same team, but where the sass package is pure JavaScript, sass-embedded is instead a JavaScript wrapper around a native Dart executable. This means sass-embedded will generally be much faster especially for large Sass compilations

The issue was introduced with bootstrap 5.3.3, and is only the last line in variables.scss with this comment: // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3 , so I thought it would be an easier and quickier fix to just revert it in bootstrap 🫣. But, yeah, my understanding is: the real problem is not bootstrap or vite, but it lies inside sass-embedded.
Maybe we should report this issue in sass-embedded repo as well.

[julien-deramond]

I've found a bit more time to explore this issue.

I've created an environment without Vite that installs Bootstrap v5.3.3 and "sass-embedded": "npm:sass-embedded@1.77.1". You can find it here: StackBlitz Project. This environment compiles a simplified version of the Sass content related to this issue.

mv /Users/xxx/Downloads/stackblitz-starters-cvpy9o.zip /tmp/
mkdir stackblitz-starters-cvpy9o
mv stackblitz-starters-cvpy9o.zip stackblitz-starters-cvpy9o/ 
cd stackblitz-starters-cvpy9o/
unzip stackblitz-starters-cvpy9o.zip

npm i
npm run build

The output will show some generated CSS based on Bootstrap, meaning the Sass compilation worked well.

The structure used includes:

• index.scss that imports _function.scss and _variables.scss from Bootstrap v5.3.3 installed in node_modules.

Given these elements, it seems that the issue might not lie within sass-embedded itself (at least with basic usage). The problem could be related to Vite, or an interaction between Vite and sass-embedded.

[julien-deramond]

Based on my previous comment and confirmation in sass/embedded-host-node#305 (comment), I'm going to close this issue as it's not something to fix in Bootstrap directly.

[andybeesee]

For anyone else that hits this using Vite, a quick workaround is to change the sass api in the Vite config:

import { defineConfig } from 'vite';

export default defineConfig({
    css: {
        preprocessorOptions: {
            scss: {
                // see: https://vite.dev/config/shared-options.html#css-preprocessoroptions
                api: 'modern',
            }
        }
    },
};