Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Hi

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

Thanks



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.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(