Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

problem for serve start vue theme


hello, I'm trying to compile the theme using: yarn serve
but it does not work.
My node version: v16.16.0
Output when running:


$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin

ERROR Failed to compile with 1 error 13:48:33

error in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss

Syntax Error: SassError: Undefined variable.
â•·
142 │ values: $utilities-border-colors
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_utilities.scss 142:15 @import
src/assets/sass/_init.scss 19:9 @import
src/assets/sass/plugins.scss 10:9 @import
/Users/jonathananiceto/Sites/tchau/src/App.vue 21:9 root stylesheet


@ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-419 15:3-20:5 16:22-427
@ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
@ ./src/App.vue
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.15.7:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

No issues found.


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


Hi,

Looks like we have this error in the older Metronic version.

We reproduced this error in v8.0.38, if you are using this or an older version of Metronic, you can fix it by including bootstrap import @import “~bootstrap/scss/maps”; in file vue/demo1/src/assets/sass/_init.scss.

Please follow the import order as shown below:

// Bootstrap initialization
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";


Regards,
Lauris Stepanovs,
Keenthemes Support Team



this was exactly what i needed!!
worked perfectly, thanks!

regards,



Glad to hear that. All the best with your project!



Hi,

Could you please specify which Metronic version and which demo are you using?


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