方法一:使用命令行主题工具 安装工具 初始化变量文件 修改变量 编译主题 引入自定义主题 方法二: 直接修改element样式变量 创建vue-cli项目 安装vue 安装vue-cli 创建webpack项目( vue-project) 启动项目 安装scss插件 安装element-ui 安装sass-loader,node-sass 改变element样式变量 使用Vue开发项目,用到Element-UI,...
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、打开文件,根据项目要求进行修改 比如:修改主题色 修...
1、使用全局样式覆盖(做到一半放弃了,这就不是人干的事!😭) 2、使用官方提供的在线主题编辑器下载后进行替换(编译后无法修改) 3、通过改变 element-ui 的样式变量(无法将变量通过js传入) 先创建一个 element-variables.scss 的文件,内容如下: /* 改变主题色变量 */$--color-primary: teal;/* 改变 icon ...
默认情况下编译的主题目录是放在./theme下,你可以通过-o参数指定打包目录。像引入默认主题一样,在代码里直接引用theme/index.css文件即可。 7、搭配插件按需引入组件主题 如果是搭配babel-plugin-component一起使用,只需要修改.babelrc的配置,指定styleLibraryName路径为自定义主题相对于.babelrc的路径,注意要加~。
第一步,在官网的主题页面,修改背景色、字体颜色及边框颜色 第二步,下载主题 第三步,用下载的css文件替换掉默认的css文件 效果如下: el-backtop 回到顶部组件 代码如下: el-form-item label宽度自适应 代码如下: el-form-item 循环校验 代码如下: el-form-item 表单嵌套表格校验 ...
最重要的一点,不管对暗黑模式还是清亮模式进行修改,首先修改根目录下两种模式对应的element-variables-light.scss文件,修改为element-variables.scss,系统才会识别出来,然后在执行et -i,修改完之后在执行et 编译主题。 6、执行gulp输出 gulp css-wrap 7、在main.js中引入 ...
2.修改 scss 变量的mix函数 第一步 实现mixToVar函数 其实ele提供的主题编译工具逻辑很简单,就是把element-theme-chalk中的变量暴露出来,供项目修改,修改后再执行编译命令,把修改后的主题文件重写进element-theme-chalk中的变量文件,在执行scss编译,把scss文件编译成css文件 ...
修改主题效果 打包如下: 优化前 app.js 46.78KB 发现打包出来的element-variables.scss比较大,把所有的css都加载了。 2. 优化 修改element-variables.scss // 全部加载修改 // @import "~element-ui/packages/theme-chalk/src/index"; // 按需加载修改 @import "~element-ui/packages/theme-chalk/src/carousel...
首先用开发者工具定位对应的样式：.ant-picker-calendar-date-today，这就是我们要修改的地方。.ant-...
由于使用官方的element-theme很久没更新,它依赖的gulp版本和node12.*不兼容。尝试许久未能成功。在研究官方的element-theme-chalk库时,发现其实很简单。原理就是首先要先把自己要覆盖的变量和官方scss文件融合在一起。然后用gulp把scss文件转成css文件。 第一步,创建一个自定义的scss文件。