1

I want to upgrade bootstrap-sass 3.x to bootstrap 5("bootstrap": "^5.1.3",) right now. First I add the bootstrap 5:

npm install bootstrap

the second step I changed the legacy import from:

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";

to:

@import "../../node_modules/bootstrap/scss/variables";

followed by this docs. but the webpack "webpack": "^4.36.0", build shows this error:

    [0] ./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/sass-loader/dist/cjs.js!./src/public/bootstrap-lite.scss 572 bytes {0} [built] [failed] [1 error]

ERROR in ./src/public/bootstrap-lite.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/sass-loader/dist/cjs.js!./src/public/bootstrap-lite.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, "warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid CSS value.
   ╷
94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
   │                             ^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_variables.scss 94:29  @import
  src/public/bootstrap-lite.scss 18:9                root stylesheet

why did this happen? what should I do to fix this problem?

Dolphin
  • 29,069
  • 61
  • 260
  • 539

1 Answers1

0

need to import functions like this:

@import "../../node_modules/bootstrap/scss/functions";

the functions should be the first to import. more info: Invalid CSS value error while Customizing Bootstrap 5 colors with sass 3

Dolphin
  • 29,069
  • 61
  • 260
  • 539