Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Fix for the Sass Import Error:

Reinstall Bootstrap Dependencies
Metronic relies on specific Bootstrap/Sass versions. Run:
npm uninstall bootstrap sass
npm install bootstrap@4.6.0 sass@1.32.13 --save-exact # Match Metronic 7's requirements

Reset Webpack Cache
Delete node_modules, package-lock.json, and run:
npm cache clean --force
npm install

Check File Paths
Ensure your _init.scss file references the correct location of bootstrap/scss/functions. If paths are relative, add:
@import "~bootstrap/scss/functions"; // Add `~` for Webpack aliases
Node Version Downgrade
Metronic 7 may not support Node 18. Try switching to Node 14.x via nvm or fnm.

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";


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(