Topic: Webpack build issue

marian.moravcik@emea.ironmountain.com priority asked 2 months ago


Expected behavior Compile successfully

Actual behavior Sass error while building webpack

1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: $color: shift-color(#3b71ca, -80%) is not a color.\n ╷\n246 │ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);\r\n │
^^^^^^^^^^^^^^^^^^^^\n ╵\n node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix\_functions.scss 246:15 opaque()\n node_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix\mixins\_table-variants.scss 4:28 table-variant()\n n ode_modules\mdb-ui-kit\src\mdb\scss\bootstrap-rtl-fix\_tables.scss 144:3 @import\n node_modules\mdb-ui-kit\src\mdb\scss\mdb.free.scss 24:9 @import\n node_modules\mdb-ui-kit\src\mdb\scss\mdb.pro.scss 2:9 @import\n assets\scss\style.scss 23:9 root stylesheet");

Resources (screenshots, code snippets etc.) issue started at version 5.0.0 last work with 4.4.0

"webpack": "5.75.0",
"sass": "1.56.1",
"sass-loader": "13.2.0",
"style-loader": "3.3.1",

kpienkowska staff answered 2 months ago


Are those all dependencies you use? For MDB5 v. 5.0.0 to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer.

Also, ensure all scss files are in the correct order and that all are included in the import map.


marian.moravcik@emea.ironmountain.com priority commented 2 months ago

good point. issue fixed



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No