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