前言:根据官网提示,在index.html的html标签下使用dark启用暗黑模式,然后使用scss引入覆盖的方式自定义主题
报错如下:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: This variable is available from multiple global modules. ? ? ? 1 ? │ @use "~/src/styles/mixins.scss" as *; @use "~/src/styles/elementplus.scss" as *; ? ? │ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ includes variable ... │ 4 ? │ @use 'common/var' as *; ? ? │ ━━━━━━━━━━━━━━━━━━━━━━ includes variable ... │ 21 ?│ ? @include set-component-css-var('button', $button); ? ? │ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?^^^^^^^ variable use ? ? ? ? node_modules\element-plus\theme-chalk\src\button.scss 21:44 ? ? ? ?@content
?这里真的巨坑,找了很久的原因,还把element-plus-vite-starter 模版它clone下来研究了很久,after so long time....(这句话请忽略,博主自己的槽语)
- 换成下面的写法就可以了,这里的区别在于新建了一个dark.scss,把之前自定义的变量原封不动的复制到dark.scss,然后在elementplus.scss引入dark.scss
|