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

[ranlix]

Element UI version

2.15.5

OS/Browsers version

MasOs Big Sur / Microsoft Edge Version 93.0.961.52

Vue version

2.6.14

Reproduction Link

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";
}

3. 在 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 });

4. 点击页面上的 switch，切换模式。

What is Expected?

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

What is actually happening?

这个时候颜色切换了，但是icon没有显示（fonts没有引入和加载）

[element-bot]

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

Reproduction Link

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\";

}

3. 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 });

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

[yangfeng727]

我想使用scss 变量方式实现动态换肤，但是在element-ui外包裹一层class 后会导致页面element ui样式异常，请问大家有什么解决办法吗？代码如下

index.scss

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

:root[theme='dark']{
    @import "./theme/dark/element-vars.scss";
    @import "~element-ui/packages/theme-chalk/src/index";
}
:root[theme='light']{
    @import "./theme/light/element-vars.scss";
    @import "~element-ui/packages/theme-chalk/src/index";
}

elementPlugins.js

import ElementUI from 'element-ui';

export default{
    install(Vue){
        Vue.use(ElementUI)
    }
}

依赖版本如下

   "element-ui": "^2.15.7",
   "vue": "^2.6.14",
   "sass": "^1.54.4",
    "sass-loader": "^12.6.0",