解决element plus暗黑模式自定义主题报错Module build failed (from ./node_modules/sass-loader/dist/cjs.js):SassErro

前言:根据官网提示,在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

猜你喜欢

转载自blog.csdn.net/liuxin00020/article/details/125205049
今日推荐