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