Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Error while trying to compile src (I am using basic HTML version)


Here are the steps I did:
1. I renamed folder src to metronic-src and tools to metronic-tools (to not mix it with my project). Also I moved them into my project.
2. I made necessary changes to gulp.config.json

{
"config": {
"path": {
"src": "../metronic-src"
},
"dist": [
"../dist/metronic-assets"
]
}
}

3. I ran necessary commands for this documentation https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp
4. When I run gulp command I am getting error:

Error in plugin "sass"
Message:
..\metronic-src\sass\components\components.scss
Error: join(null, "..\..\..\..\tools\node_modules\bootstrap\scss\bootstrap"): part 0 was null, but part 1 was not.
â•·
9 │ @import "../../../../tools/node_modules/bootstrap/scss/bootstrap";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
..\metronic-src\sass\components\components.scss 9:9 @import
..\metronic-src\sass\style.bundle.css 9:9 root stylesheet
E:\Projects\REA2Frontend\rea2-frontend\metronic-tools\node_modules\sass\sass.dart.js:5272
throw error;
^


Some hints:
- gulp command works without metronic-src folder
- gulp command works in demo folder

I think this is issue with scss paths since I removed 1 folder nesting from gulp.config.json, this should be configurable, but the config I have is different from config from documentation so I am confused there, original config looks like this:
{
"config": {
"path": {
"src": "../{demo}/src"
},
"dist": [
"../{demo}/dist/assets"
]
}
}

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 (2)


Ok, I found the issue:

@import "../../../metronic-tools/node_modules/bootstrap/scss/bootstrap";

Its line 9 in components.scss, hardcoded url to bootstrap in tools folder. After fixing it, it works now.

PS: I can't edit my main message above, its giving me an error, even if I go into edit and press save right away. I wanted to fix some formatting and I couldn't.



Hi Rafał,

Great to hear that you were able to find the issue and resolve it. Thank you for sharing the solution with us.

If you have any further questions or concerns, please don't hesitate to reach out to us.

Regarding the editing issue you experienced, please note that there is a time limit to edit posts after they have been submitted. Once this time limit has elapsed, users are no longer able to edit their posts.

If you need to make changes or clarify something in your post, you can either create a new post or add a new reply.

Please let us know if you have any further questions or concerns.

Thanks for reaching out.

Thanks


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  :(