Importing bootstrap.scss breaks SASS compilation for tables component

[mxomxo77mxo]

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

Operating system and version: WIndows 11
Browser and version: Chrome 127

I'm using bootstrap 5.3.3 now in my next (version - 14.2.5) app.
I've started migraton from v4 --> v5 and I get this error, before it worked cool. Can you please help me figure out if issue is coming from my app side. When I'm commenting seperate tables import it's working fine. It's coming from attached image part of code.

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[15].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[15].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[6].oneOf[15].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[6].oneOf[15].use[4]!./styles/dashforge.scss
SassError: Expected identifier.
  ╷
3 │   .table-#3A84FF{
  │           ^
  ╵
  node_modules\bootstrap\scss\mixins\_table-variants.scss 3:11  table-variant()
  styles\bootstrap\_table.scss 329:3                            @import
  styles\dashforge.scss 58:9                                    root stylesheet

Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[15].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[15].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[6].oneOf[15].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[6].oneOf[15].use[4]!./styles/dashforge.scss
./styles/dashforge.scss

Reduced test cases

migate bootstrap from v4 to v5
run next js app
import bootstrap/table

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

Windows

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.3.3

[louismaximepiton]

Hey,

I've converted this to a discussion for now since it seems that the issue is project specific and not coming from Bootstrap.

It seems that the $table-variants has been changed with something like "#3A84FF": ... can you confirm it ?
The easier way to help us debug it with you would be a minimum reproducible example using StackBlitz for instance.

[ynng3]

Did you perhaps insert the value into the key part of $table-variants? The key part becomes the class name, so you should not insert value corresponding to a color code.

// Wrong code (your expected code)
$table-variants: (
  ...
  `"#3A84FF": .........
  ...
)

// Right code
$table-variants: (
  ...
  `"yourcustomcolorname": #3A84FF
  ...
)

If you haven't configured it as above, please check the original code below and diagnose the current issue yourself.

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
) !default;

@each $color, $value in $table-variants {
  @include table-variant($color, $value);
}