$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; │ unknown function treated as plain CSS ╵

[Zeddnyx]

Prerequisites

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

Describe the issue

i got this error when try to build my app
kinda frustate cause this error
idn what should i do to fix it

 ⚠ Port 3000 is in use, trying 3001 instead.
   ▲ Next.js 14.1.0
   - Local:        http://localhost:3001
   - Environments: .env

 ✓ Ready in 2.3s
 ○ Compiling /modules/beranda/pages ...
 ⨯ ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[6].oneOf[14].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[6].oneOf[14].use[4]!./src/assets/scss/style.scss
SassError: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 5: 1.25rem, 6: 1.5rem, 7: 1.75rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 3rem, 12: 3.5rem, 13: 4rem, 14: 4.5rem, 15: 5rem, 16: 6rem, 17: 7rem, 18: 8rem, 19: 9rem, 20: 10rem, 21: 12.5rem, 22: 15rem, 23: 17.5rem, 24: 20rem, 25: 22.5rem) isn't a valid CSS value.
    ╷
141 │ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
    │                                                                ^^^^^^^^ value
    │                                                 ━━━━━━━━━━━━━━━━━━━━━━━━ unknown function treated as plain CSS
    ╵
  src/assets/scss/_variables.scss 141:64  @use
  src/assets/scss/style.scss 18:1         root stylesheet

Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[6].oneOf[14].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[6].oneOf[14].use[4]!./src/assets/scss/style.scss
./src/assets/scss/style.scss
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/home/zedd/work/profilix/profilix-landing/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[13].use[1]!/home/zedd/work/profilix/profilix-landing/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[13].use[2]!/home/zedd/work/profilix/profilix-landing/pages/modules/profile/style.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 2 items } -> webpack/lib/ModuleWarning -> Warning
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/home/zedd/work/profilix/profilix-landing/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!/home/zedd/work/profilix/profilix-landing/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!/home/zedd/work/profilix/profilix-landing/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[6].oneOf[14].use[3]!/home/zedd/work/profilix/profilix-landing/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[6].oneOf[14].use[4]!/home/zedd/work/profilix/profilix-landing/src/assets/scss/style.scss': No serializer registered for SassError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
 ⨯ ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[6].oneOf[14].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[6].oneOf[14].use[4]!./src/assets/scss/style.scss
SassError: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 5: 1.25rem, 6: 1.5rem, 7: 1.75rem, 8: 2rem, 9: 2.25rem, 10: 2.5rem, 11: 3rem, 12: 3.5rem, 13: 4rem, 14: 4.5rem, 15: 5rem, 16: 6rem, 17: 7rem, 18: 8rem, 19: 9rem, 20: 10rem, 21: 12.5rem, 22: 15rem, 23: 17.5rem, 24: 20rem, 25: 22.5rem) isn't a valid CSS value.
    ╷
141 │ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
    │                                                                ^^^^^^^^ value
    │                                                 ━━━━━━━━━━━━━━━━━━━━━━━━ unknown function treated as plain CSS
    ╵
  src/assets/scss/_variables.scss 141:64  @use
  src/assets/scss/style.scss 18:1         root stylesheet

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

Reduced test cases

i try added a custome var like this
$enable-negative-margins: true !default; inside styles.scss

but still get the same error

 /*!
Theme Name: Sandbox - Modern & Multipurpose Nextjs Template
Theme URI:	
Version:	1.0.0
Author:		ui-lib
*/

// Bootstrap Functions
// @use '/bootstrap/scss/functions';

// Theme colors
@use './theme-colors';

// User variables
@use './user-variables';

// Theme variables
@use './variables';

// Bootstrap configuration
@use '../../../node_modules/bootstrap/scss/functions.scss';
@use "../../../node_modules/bootstrap/scss/variables.scss";
@use '../../../node_modules/bootstrap/scss/mixins.scss';
$enable-dark-mode: false;
$enable-negative-margins: true !default;
@use '../../../node_modules/bootstrap/scss/maps.scss';
@use '../../../node_modules/bootstrap/scss/utilities.scss';

// Theme configuration
@use './theme/functions';
@use './theme/mixins';
@use './theme/utilities';
@use './theme/root';


// Theme layout & components
@use './theme/theme';

// User custom styles
@use './user';

if u need more information please ask, cause idk what musk i post

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

Linux

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

Firefox

What version of Bootstrap are you using?

v5.3.2

[github-actions]

Hello @Zeddnyx. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[julien-deramond]

Thanks for reporting this issue @Zeddnyx
It would help if you could create the reduced test case mentioned in #39619 (comment) with CodePen, Stackblitz or any other tools.
Based on the code you shared, I'm wondering if the use of @use instead of @import couldn't be the cause here but without a reproducible project, it's difficult to say.

[Zeddnyx]

Im sorry, I'm kinda new on creating an issue, I'll give u the test case later

[Zeddnyx]

i solved by added this func inside _variable.scss

@function negativify-map($map) {
  $result: ();
  @each $key, $value in $map {
    @if $key != 0 {
      $result: map-merge($result, ('n' + $key: (-$value)));
    }
  }
  @return $result;
}

and after that i got error again but is different
the error:

SassError: Undefined mixin.
   ╷
54 │     @include alert-variant($background, $border, $color);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/assets/scss/theme/_alert.scss 54:5  @import
  src/assets/scss/theme/_theme.scss 18:9  @import
  src/assets/scss/style.scss 20:9         root stylesheet

then i added

@mixin alert-variant($background, $border, $color) {
  background-color: $background;
  border-color: $border;
  color: $color;
}

inside _alert.scss
my web is work again but rn im facing new issue, my styled is wild awful like really awfull

all my page is being like that

idk what should i do to make it the style normal again

[Zeddnyx]