方法一:使用命令行主题工具 使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍)。 安装工具 首先安装「主题生成工具」。 npm i element-theme -g 1. 然后安装chalk主题,可以从 npm 安装或者从 GitHub 拉取最新代码。 #从 npm npm i element-theme-chalk -D #从 GitHub npm i https://...
1、进入项目文件夹 cd ‘文件夹名称’ 2、全局安装主题生成工具 npm install element-theme -g 1. 3、在项目中安装chalk主题 npm install element-chalk -D 1. 4、初始化变量 et -i 1. 初始化成功之后,会在根目录下生成 element-variables.scss 文件 5、打开文件,根据项目要求进行修改 比如:修改主题色 修...
el-select 下拉框样式修改 代码如下: el-input 打开弹框 自动聚焦 代码如下: 主题样式修改 曾经为了修改组件风格,一个项目用了上百个样式穿透,后来才发现定制一个主题就够了! 第一步,在官网的主题页面,修改背景色、字体颜色及边框颜色 第二步,下载主题 第三步,用下载的css文件替换掉默认的css文件 效果如下: e...
其实ele提供的主题编译工具逻辑很简单,就是把element-theme-chalk中的变量暴露出来,供项目修改,修改后再执行编译命令,把修改后的主题文件重写进element-theme-chalk中的变量文件,在执行scss编译,把scss文件编译成css文件 那我们也可以加一层命令,就是把mix函数替换掉,替换逻辑很简单,读取element-theme-chalk中的scss文件...
打开你项目的node_modules文件夹，一层层点开，找到对应样式文件，按照需求修改即可。
由于使用官方的element-theme很久没更新,它依赖的gulp版本和node12.*不兼容。尝试许久未能成功。在研究官方的element-theme-chalk库时,发现其实很简单。原理就是首先要先把自己要覆盖的变量和官方scss文件融合在一起。然后用gulp把scss文件转成css文件。 第一步,创建一个自定义的scss文件。
1. 第一种方法,官方提供的方法,直接修改scss 在main.js引入elementUI,以及主题:(主题是可以自己设置下载配置的--官方工具) 然后在项目src->assets目录下创建element-variables.scss 内容可以从官网复制过来, 然后在main.js引入,见上图注释的代码 结束第一种,可以随便写几个element组件试试下 ...
element-ui更改主题颜色 现在介绍的需要使用scss 1. 安装需要的package //下载sass包npm i node-sass sass-loader -D// 安装主体工具,注意没全局装npm i element-theme -D//安装主题npm i element-theme-chalk 2. 生成自定义的scss 然后运行, 因为我没有全局安装,所以要换个命令 ./node_modules/element-the...
1. 修改主题(官方文档) 官方文档:自定义主题 Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量。 新建一个样式文件,例如element-variables.scss,写入以下内容: /* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量,必需 ...