elementui sass
在 Element UI 中使用 Sass
Element UI 支持通过 Sass 进行样式定制，可以通过修改变量或覆盖样式来实现主题定制或组件样式调整。
安装 Sass 相关依赖：
npm install sass sass-loader --save-dev修改主题变量
在项目中创建 src/styles/element-variables.scss 文件，覆盖默认变量：
$--color-primary: #409EFF;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";在 main.js 中引入该文件：
import './styles/element-variables.scss'
import ElementUI from 'element-ui'按需引入时定制主题
修改 babel.config.js 配置：
module.exports = {
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
style: true
}
]
]
}创建单独的样式文件 element-variables.scss：
$--color-primary: #ff0000;
@import "~element-ui/packages/theme-chalk/src/button";深度选择器覆盖组件样式
使用 ::v-deep 或 /deep/ 覆盖组件内部样式：
::v-deep .el-button {
border-radius: 0;
}全局变量配置
创建 variables.scss 定义全局变量：
$primary-color: #409EFF;
$warning-color: #E6A23C;在组件中引用：
<style lang="scss">
@import "@/styles/variables.scss";
.custom-class {
color: $primary-color;
}
</style>最佳实践
保持变量统一管理，避免散落在多个文件 为自定义样式添加特定前缀，防止全局污染 优先使用变量覆盖而非直接样式覆盖 通过创建 mixin 复用常用样式模式
常见问题解决
样式不生效时检查 Sass 加载器版本是否兼容
确保文件路径引用正确
构建时出现路径错误可尝试使用 ~ 前缀
深度选择器在 Scoped CSS 中必须使用 ::v-deep
