Nuxt.js: element ui custom scss variables not woking

[gitzhaochen]

1.Change theme color by overriding custom scss variables in order to customize default theme
2.Specify $--font-path variable as required https://element.eleme.io/#/en-US/component/custom-theme
error /Users/zhaochen/WebstormProjects/my-nuxt/node_modules/.npminstall/element-ui/2.4.7/element-ui/lib/theme-chalk/fonts/element-icons.woff:1 (function (exports, require, module, __filename, __dirname) { wOFF SyntaxError: Invalid or unexpected token

_{This question is available on Nuxt community (#c7853)}

[cmty[bot]]

This issue as been imported as question since it does not respect nuxt.js issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/nuxt.js/issues/c7853.

[dre1080]

Same issue

[foxted]

@gitzhaochen What path did you use for the $--font-path variable? I noticed that using the one provided in the Element documentation was not working, I used a relative path instead:

$--font-path: './../../node_modules/element-ui/lib/theme-chalk/fonts';

[t1gu1]

True problem

!!! I think that the true probleme in that case is that we can't use ~ or @ in a scss variables value. !!!
Like: $--font-path: "~element-ui/lib/theme-chalk/fonts";

It's only possible with import.

Doc template error link:
http://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-project

---

Workaround

As @foxted said use relative path instead $--font-path: './../../node_modules/element-ui/lib/theme-chalk/fonts'; in your element-ui.scss

And if you want to use and modify variables in custom components, you can do something like that in your assets/scss/variables.scss file:

And only @import "~assets/scss/variables"; files in your custom components. :) (You can make it better as i say below)

If you won't import it in each compnents you can install npm i nuxt-sass-resources-loader and add in you nuxt.config.js these lines:

That's the best workaround i am able to do presently.

---

Good luck for your projects! ;)

[gitzhaochen]

@t1gu1 u are right, in a scss variables we can't use ~ or @ ,just replace with relative path, it is working now , really thank you !!!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.