前端 - [element2 自定义主题]为什么可以覆盖/改变element的scss变量？

Question

自定义主题
在项目中改变 SCSS 变量
Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：

/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";

---

为什么可以覆盖element的scss变量？element的scss不是已经被编译好为css了吗，scss变量按说都已经变成具体的值了啊

@import "~element-ui/packages/theme-chalk/src/index";import 'element-ui/lib/theme-chalk/index.css';

上面这两者的关系又是什么

---

我看到了下边这样一句，好像懂了一部分，有大佬可以确定一下我猜的对不对

之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
需要注意的是，样式文件需要单独引入。

所以
1 @import "~element-ui/packages/theme-chalk/src/index";
2 import 'element-ui/lib/theme-chalk/index.css';
上面scss的编译出来就是下边的css，上边和下边不需要同时引入，同时引入其中一个会覆盖另外一个。所以使用了1自定义了主题就不要用2了

Answer 1

node_modules下面有element-ui文件夹，按照你列出的路径点击去看看就知道什么情况了。。。