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

ranlix commented 2 years ago

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

在 assets/stylesheets/element-ui/ 下创建两个模式的变量文件：vars-dark.scss 和 vars-light.scss;
在统计目录的 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";
}

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

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

What is Expected?

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

What is actually happening?

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

element-bot commented 2 years ago

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

Create two pattern variable files under assets / stylesheets / element UI /: vars-dark.scss and vars-light.scss;
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 commented 6 months ago

我想使用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",

ElemeFE / element