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

HTML Version SASS Modification - Compilation Error


Hello together,

I downloaded the HTML file ("metronic_html_v8.1.2_demo5") and wanted to make design changes with SASS .

Some files just do not compile.

####################################

Compilation Error
Error: Can't find stylesheet to import.
â•·
17 │ @import "bootstrap/scss/functions";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\src\sass\_init.scss 17:9 @import
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\src\sass\plugins.scss 10:9 root stylesheet
--------------------
Compilation Error
Error: Can't find stylesheet to import.
â•·
17 │ @import "bootstrap/scss/functions";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\src\sass\_init.scss 17:9 @import
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\src\sass\style.scss 6:9 root stylesheet
--------------------
Compilation Error
Error: Undefined variable.
â•·
8 │ @each $color, $value in $colors {
│ ^^^^^^^
╵
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\node_modules\bootstrap\scss\_root.scss 8:27 @import
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\src\sass\components\components.scss 6:9 root stylesheet
--------------------
Compilation Error
Error: Can't find stylesheet to import.
â•·
22 │ @import "~select2/src/scss/core.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\plugins.scss 22:9 root stylesheet
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\cropper\cropper.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\cropper\cropper.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\src\plugins\fonticon\fonticon.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\src\plugins\fonticon\fonticon.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\cookiealert\cookiealert.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\cookiealert\cookiealert.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\jstree\jstree.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\jstree\jstree.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\leaflet\leaflet.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\leaflet\leaflet.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\tiny-slider\tiny-slider.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\tiny-slider\tiny-slider.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\vis-timeline\vis-timeline.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\vis-timeline\vis-timeline.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\dist\assets\plugins\global\fonts\fonticon\fonticon.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\demo5\dist\assets\plugins\global\fonts\fonticon\fonticon.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\prismjs\prismjs.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\prismjs\prismjs.css
--------------------
Generated:
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\jkanban\jkanban.css.map
c:\Users\Toredo\Documents\Santo Projects\2022-08 TASS HTML Template\tass_files\metronic_theme\tools\webpack\plugins\custom\jkanban\jkanban.css
--------------------
Watching...
--------------------

####################################

Can someone tell me whats wrong here?
I have done all the necessary steps as described in the doc (yarn, gulp, etc.).


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


Hi,

Did you do these commands in the tools folder?


cd metronic_html_v8.1.2_demo5/tools
yarn
gulp


May I know your node.js version?

Thanks



Hi Faizal,

thank you for your respond.
Yes yarn und gulp was executed successful.

My node.js version is v16.17.0



Hi,

If your yarn and gulp were executed successful, could you please clarify how did you get the error above?

Thanks



the error appears when I start the SASS-Compiler. Most of the files can be compiled, but as you can see some of the files occurs an error.



Hi

Are you using 3rd party plugin for SASS-Compiler? We build using gulp.

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