sass 重写elementui样式

在使用Sass重写Element UI样式时，你需要确保你的样式文件加载顺序高于Element UI的默认样式。这可以通过几种方法实现：

1. 使用全局样式文件：

   如果你使用的是Vue CLI创建的项目，可以在src/styles/index.scss中重写样式。

// 引入Element UI样式
@import "~element-ui/packages/theme-chalk/src/index";
 
// 重写Element样式
.el-button {
  background-color: #f56c6c;
}

2. 使用单文件组件(SCSS)：

   在Vue组件中使用Sass重写样式。

<template>
  <el-button>按钮</el-button>
</template>
 
<script>
export default {
  // ...
};
</script>
 
<style lang="scss">
@import "~element-ui/packages/theme-chalk/src/button"; // 引入Element UI的Button样式
 
.el-button {
  background-color: #f56c6c; // 重写背景颜色
}
</style>

3. 使用!important提升优先级：

   如果你需要覆盖Element UI中的特定样式，可以使用!important来提升你的样式规则的优先级。

.el-button {
  background-color: #f56c6c !important;
}

请注意，使用!important可能会导致维护问题，因此应该谨慎使用。

确保在组织样式时遵循CSS特性（例如层叠和特异性），这样你的自定义样式可以有效地覆盖默认样式。