1.安装element-theme-chalk: ```bash npm install element-theme-chalk ``` 2.在主要的Vue文件(通常是App.vue或main.js)中引入主题包,并设置全局样式: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //引入主题样式 Vue....
1、首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动,这里以全局安装做演示。 npm i element-theme -g 2、安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。 #从 npm npm i element-theme-chalk -D #从 GitHub npm i https...
npm i element-theme-chalk -S Usage Use Sass import @import'element-theme-chalk'; Or Use webpack import'element-theme-chalk'; Or Import on demand import'element-theme-chalk/lib/input.css';import'element-theme-chalk/lib/select.css';
代码地址:theme-chalk-preview代码预览地址:theme-chalk-preview预览 首先说一下我的项目环境: Vue: 2.6.10 Less: 3.9.0 Element: 2.15.6 css-color-function: 1.3.3 代码编写 由于项目需要对主题色进行缓存,所以主要代码编写在Vue的app.vue文件下,以确保在初始化时能及时获取主题色配置 1. Vuex相关 state: {...
替换的文件会包含 node_modules/element-theme-chalk 里面的scss文件 image-8.png 再次修改element-variables.scss文件 /* Color --- */// color|1|Brand Color|0$--color-primary:var(--customize-theme)!default;/// color|1|Background Color|4$--color-white:#FFFFFF!default;/// color|1|Background...
由于使用官方的element-theme很久没更新,它依赖的gulp版本和node12.*不兼容。尝试许久未能成功。在研究官方的element-theme-chalk库时,发现其实很简单。原理就是首先要先把自己要覆盖的变量和官方scss文件融合在一起。然后用gulp把scss文件转成css文件。 第一步,创建一个自定义的scss文件。
chalk: "", // content of theme-chalk css theme: ORIGINAL_THEME, showSuccess: true, // 是否弹出换肤成功消息 }; }, mounted() { if (this.default != null) { this.theme = this.default; this.$emit("onThemeChange", this.theme); ...
com/ElementUI/theme-chalk -D 初始化变量文件 主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参数指定文件输出目录。
please install `element-theme-chalk` element ui自定义样式时,官方里有提到如果没有全局按装element-theme,可以在.bin目录下进行操作产生.css文件,但实际操作需要全局安装element-theme,否则在bin目录下et -i会找不到element-theme-chalk包,目录结构不在一层...
@import'element-theme-chalk'; Or Use webpack import'element-theme-chalk'; Or Import on demand import'element-theme-chalk/lib/input.css';import'element-theme-chalk/lib/select.css';// ...