代码地址: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: {...
consturl=`https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` this.getCSSString(url,chalkHandler,'chalk') }else{ chalkHandler() conststyles=[].slice.call(document.querySelectorAll('style')) .filter(style=>{ consttext=style.innerText returnnewRegExp(oldVal,'i').test(text...
1、首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动,这里以全局安装做演示。 npm i element-theme -g 2、安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。 #从 npm npm i element-theme-chalk -D #从 GitHub npm i https...
主要逻辑就是依靠gulp生成不同主题的静态css文件(element-theme-chalk就是靠这个的) 切换主题的时候,引入不同的静态css文件 gulpfile.js是这么写的 var gulp = require('gulp') var $ = require('gulp-load-plugins')() var fs = require('fs') var path = require('path') var del = require('del'...
替换的文件会包含 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...
1.出现问题如下图 element-ui 版本2.4.11 webpack ^3.6.0 自己有使用sass 增加sass配置 详见build/utils.js element-ui/lib/theme-chalk/index.css 此目录下有index.css 相关代码 main.js {代码...} package.json...
npm i element-theme -g 2、安装白垩主题 npm i element-theme-chalk -D 3、初始化变量文件 et -i 执行完以上命令后,会在根目录下会生成element-variables.scss文件,里边包含了elementui中组件所用到的所有变量,像字体大小,颜色,背景颜色等。 如果项目有自己的设计稿,并且对字体颜色、按钮颜色等有严格要求,可...
build/bin/gen-cssfile根据components.json获取组件名,找到packages/theme-chalk对应的各组件的scss文件信息,以@import "./组件.scss"的形式,写入packages/theme-chalk/index.scss文件,也就是说总的入口文件index.scss可以动态生成。 index.scss 2.2. 构建(gulp build --gulpfile packages/theme-chalk/gulpfile.js)...
由于使用官方的element-theme很久没更新,它依赖的gulp版本和node12.*不兼容。尝试许久未能成功。在研究官方的element-theme-chalk库时,发现其实很简单。原理就是首先要先把自己要覆盖的变量和官方scss文件融合在一起。然后用gulp把scss文件转成css文件。 第一步,创建一个自定义的scss文件。
npm i element-theme -g 2.安装主题,可以从 npm 安装或者从 GitHub 拉取最新代码。 npm i element-theme-chalk -D npm i https://github.com/ElementUI/theme-chalk -D 3.初始化变量文件 主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/...