Topic: Webpack build issue
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",
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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