element [Bug Report] Cannot load fonts when import dark.scss in .dark-mode class

fykwrbwg  于 2022-11-13  发布在  其他
关注(0)|答案(1)|浏览(180)

Element UI version

2.15.5

OS/Browsers version

MasOs Big Sur / Microsoft Edge Version 93.0.961.52

Vue version

2.6.14

https://codesandbox.io/s/nuxt-element-dark-mode-w8vjj?file=/components/Tutorial.vue

Steps to reproduce

  1. 在 assets/stylesheets/element-ui/ 下创建两个模式的变量文件:vars-dark.scss 和 vars-light.scss;
  2. 在统计目录的 index.scss 里根据类选择器引入不同的变量文件:
$--font-path: '~element-ui/lib/theme-chalk/fonts';
:root:not(.dark-mode) {
  @import "vars-light";
  @import "~element-ui/packages/theme-chalk/src/index";
}
.dark-mode {
  @import "vars-dark";
  @import "~element-ui/packages/theme-chalk/src/index";
}
  1. 在 plugins/element-ui.js 里引用:
import Vue from "vue";
import Element from "element-ui";
import locale from "element-ui/lib/locale/lang/en";
import "@/assets/stylesheets/element-ui/index.scss";

Vue.use(Element, { locale });
  1. 点击页面上的 switch,切换模式。

What is Expected?

两种模式下,颜色变化,但是icon也需要正常显示

What is actually happening?

这个时候颜色切换了,但是icon没有显示(fonts没有引入和加载)

lnlaulya

lnlaulya1#

Translation of this issue:

Element UI version

2.15.5

OS/Browsers version

MasOs Big Sur / Microsoft Edge Version 93.0.961.52

Vue version

2.6.14

https://codesandbox.io/s/nuxt-element-dark-mode-w8vjj?file=/components/Tutorial.vue

Steps to reproduce

  1. Create two pattern variable files under assets / stylesheets / element UI /: vars-dark.scss and vars-light.scss;
  2. In index.scss of the statistics directory, different variable files are introduced according to the class selector:
$--font-path: '~element-ui/lib/theme-chalk/fonts';
:root:not(.dark-mode) {

@import \"vars-light\";
@import \"~element-ui/packages/theme-chalk/src/index\";

}
.dark-mode {

@import \"vars-dark\";
@import \"~element-ui/packages/theme-chalk/src/index\";

}
  1. Reference in plugins / element-ui.js:
import Vue from \"vue\";
import Element from \"element-ui\";

import locale from \"element-ui/lib/locale/lang/en\";
import \"@/assets/stylesheets/element-ui/index.scss\";

Vue.use(Element, { locale });
  1. Click switch on the page to switch the mode.

What is Expected?

In both modes, the color changes, but the icon also needs to be displayed normally

What is actually happening?

At this time, the color is switched, but the icon is not displayed (the fonts are not introduced and loaded)

相关问题