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

> 自定义主题 > 在项目中改变 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了