Metronic Django npm run build failure: Can't find stylesheet to import.
For transparency i'm using:
- Webpack to install the packages
- Node version v18.18.2
When I run the npm run build I'm getting the following error:
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
@import "bootstrap/scss/functions";
../src/sass/_init.scss 19:9 @import
../src/sass/plugins.scss 10:9 root stylesheet
ERROR in ../src/sass/plugins.scss (../src/sass/plugins.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../src/sass/plugins.scss)
I HAVE NOT MADE ANY CHANGE TO THE CODE YET, ANY HELP?
Replies (5)
Fix for the Sass Import Error:
Reinstall Bootstrap Dependencies
Metronic relies on specific Bootstrap/Sass versions. Run:
npm uninstall bootstrap sass
Reset Webpack Cache
Delete node_modules, package-lock.json, and run:
npm install bootstrap@4.6.0 sass@1.32.13 --save-exact # Match Metronic 7's requirements npm cache clean --force
Check File Paths
Ensure your _init.scss file references the correct location of bootstrap/scss/functions. If paths are relative, add:
npm install @import "~bootstrap/scss/functions"; // Add
Node Version Downgrade
Metronic 7 may not support Node 18. Try switching to Node 14.x via nvm or fnm.~ for Webpack aliases
Need visual demos for your project? If you’re stuck debugging, try prototyping UI flows with KissingGenerator – our AI instantly generates video mockups from your screenshots. Great for team alignment!
It looks like you're facing an issue with the build process related to the missing stylesheet import. It's common to encounter such errors when paths are misconfigured or files are missing. To resolve this, make sure the bootstrap package is properly installed, and the paths in your import statements are correct.
If you're into troubleshooting and need a break or want a different kind of distraction, I highly recommend checking out Rama Casino. I've been enjoying the gaming experience there—secure, fun, and with plenty of bonuses, especially for players in Canada. It's a great way to unwind after a tech challenge!
Hi Roger Almató
Sorry for the inconvenience. We will fix it. In the meantime, please update these 2 files as a workaround.
- /starterkit/_keenthemes/src/sass/components/components.scss
@import "../../../tools/node_modules/bootstrap/scss/bootstrap";- /starterkit/_keenthemes/src/sass/_init.scss
@import "../../tools/node_modules/bootstrap/scss/functions";
@import "../../tools/node_modules/bootstrap/scss/variables";
@import "../../tools/node_modules/bootstrap/scss/variables-dark";
@import "../../tools/node_modules/bootstrap/scss/maps";
@import "../../tools/node_modules/bootstrap/scss/mixins";
@import "../../tools/node_modules/bootstrap/scss/utilities";
Thanks for the response. I did download the template last november, but I got an email with the latest tailwind releases. When logging in to themeforest and downloading the latest version, I don't have a sass folder. When I open the metronic-v9.2.7 and I open the metronic-html-starter-kit the src directory only contains css, app, core and vendors directory. So there is no scss. The css directory contains the styles.css, config.ktui.css and the demos and components directory. Where should I add those things? Thank you!
Hi Roger Almató
Metronic v9 has transitioned from Bootstrap with SCSS (used in v8) to Tailwind CSS v4, there's no scss folder.
If you have an existing v8 project that's working well, I recommend staying with v8 unless you have specific reasons to upgrade. Bootstrap is no longer providing active updates.
Thanks
