elementui less
在 Element UI 中使用 Less
Element UI 的样式默认基于 Less 预处理器开发。要自定义主题或修改样式，需掌握 Less 的基本用法以及与 Element UI 的集成方式。
安装 Less 依赖
确保项目已安装 Less 和 Less-loader：
npm install less less-loader --save-dev修改主题变量
Element UI 的主题变量存储在 element-ui/packages/theme-chalk/src/common/var.scss 中。可通过覆盖变量实现定制：
- 创建独立的 Less 文件（如
theme.less）：@import "~element-ui/packages/theme-chalk/src/index";
// 覆盖主色 @--color-primary: #ff4500;
2. 在 Webpack 配置中全局引入：
```javascript
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
modifyVars: {
'--color-primary': '#ff4500'
}
}
}
]
}
]
}
}按需加载样式
配合 babel-plugin-component 实现按需加载时，需确保 Less 文件被正确处理：
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]深度选择器使用
在 Vue 单文件组件中，使用 /deep/ 或 ::v-deep 覆盖 Element UI 组件内部样式：
.el-dialog /deep/ .el-dialog__header {
background-color: @--color-primary;
}注意事项
- 确保项目中的 Less-loader 版本与 Webpack 版本兼容（通常 Less-loader@6.x 对应 Webpack@5）
- 修改主题变量后需要重启开发服务器
- 生产环境构建时建议提取 CSS 为独立文件以优化性能
