前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp

这篇具有很好参考价值的文章主要介绍了前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

每个公司的主题风格肯定是不一样的,比如现在的公司主题就是#00ab7a。在PC端TO-B的项目中少不了用element-ui,这个时候用element-theme-chalk直接本地编译修改了element全局的主题色。

一.修改默认主题配色

1. 全局安装element-theme

npm install element-theme -g

2. 在vue中安装element-theme-chalk到dev生产环境

npm install element-theme-chalk -D

3. 初始化变量文件element-variables.scss

et -i

4. 修改主题配色

前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp

5.编译为prd环境代码

et

6. 在vue中引入element-ui

前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp

7. 如果报错 primordials is not defined

执行

npm install element-themex -g

二. 切换主题

当只有一个主题不需要切换的时候,使用element-theme-chalk就足够了,但是当主题很多的时候,最好使用gulp预处理一下。
GitHub地址https://github.com/gulpjs/gulp文章来源地址https://www.toymoban.com/news/detail-407188.html

  1. 将 gulp 全局删除
npm rm --global gulp
  1. 全局安装
npm install --global gulp-cli
  1. 进入到有package.json的根目录中执行
npm install --save-dev gulp
npm install gulp-clean-css -D   # 安装gulp-clean-css
npm install gulp-css-wrap -D  # 安装gulp-css-wrap

# or 一起安装
npm install gulp gulp-clean-css  gulp-css-wrap -D 
  1. 在根目录新建gulpfile.js 文件
// gulpfile.js

const path = require('path');
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const cssWrap = require('gulp-css-wrap');

const className = 'theme-green';
const customThemeName = `.${className}`;
 /* 找需要添加命名空间的css文件,支持正则表达式 */
 // element-change是任务名称,也可以用default
gulp.task('element-change', () => gulp.src(path.resolve(`./theme/index.css`), { allowEmpty: true })
    .pipe(cssWrap({ selector: customThemeName })) // 这个 customThemeName 相当于要给 body 添加的 class
    .pipe(cleanCSS())
    .pipe(gulp.dest(`src/themes/${className}`)));  /* 存放的目录 */
  1. 执行 gulp任务
gulp element-change
  1. 将element的font文件夹copy到theme-green
    前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp
  2. 最后在入口文件中引入index.js

到了这里,关于前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui全局添加loading效果

    前言 在我们的平时的工作中,在前后端交互的时候,为了提高页面的观赏性和用户的体验,我们会在页面上添加loading来阻止用户操作来等待接口的返回,这个时候我们会考虑到全局loading还是局部loading。 需要用到的第三方插件 首先我们需要引入element-ui的Loading组件,这个组

    2024年02月11日
    浏览(53)
  • vue element-ui 暗黑主题应用到若依框架

    基于若依框架的element-ui,将主题更换为暗黑主题。 现有的element-ui框架提供的主题不满足自定义需求,大多数框架,包括若依提供了更换主题色的功能,但也只是更换的primary-color,其他组件的主题还是以自带的为主。不满足个性化定制需求。 在线图片取色器:http://www.ecjso

    2024年02月08日
    浏览(125)
  • vue使用element-ui 实现多套自定义主题快速切换

    下载到本地项目文件 配置所需主题样式文件和className,例如上面代码:theme-black、theme-blue… 在根目录执行以下命令:

    2024年02月11日
    浏览(48)
  • Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

    第一步 :按照官方文档使用npm安装element-ui,并完整引入Element-ui npm i element-ui -S  main.js中所有的内容删去,改为 随便写点东西,run一下 成功引入element-ui,但是不喜欢默认的蓝色,看起来很烂大街,想换掉。 第二步 :由于不喜欢默认的蓝色主题,可以使用在线主题生成工具

    2024年02月14日
    浏览(53)
  • 引入element-ui步骤(按需引入和全局引入)

    两种引入方式 1)完整引入 2)按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 a)先安装 babel-plugin-component: b)修改 babel.config.js 的内容 c)创建文件 element.js(名字自定义) d)最后在main.js中添加代码

    2024年02月16日
    浏览(51)
  • 修改element-ui源码

    element-ui修改源码 1.首先,从git上拉取element的源码 2.安装依赖 npm install 3.修改 packages 中的源码,然后进行打包 npm run dist 4.找到你的项目中的 node_modules 包下的 element-ui 文件夹下的 lib 包,用你修改好后打包生成的 lib 包进行替换即可生效 下载链接在官网底部

    2024年02月11日
    浏览(45)
  • element-ui,使用message防止多次提示,全局配置可关闭提示

    情景:在我们使用message的时候每次操作成功,或者进行一些数据交互的时候会进行message提示,但是假如出现我们操作完成要异步继续进行其他操作,或者多次调用接口时这个时候一直提示对用户是很不友好的,我们只需要让他提示最后一次即可; 1:在untils文件夹下创建  o

    2024年02月16日
    浏览(48)
  • Vue3+element-ui + TS封装全局分页组件

    本文介绍了如何使用Vue3、element-ui和TypeScript封装一个全局分页组件。 在开始之前,你需要安装以下环境: Vue3 element-ui TypeScript 这个分页组件提供以下功能: 支持自定义每页显示条数 支持自定义跳转到指定页码 支持显示总页数和总条数 支持自定义样式 分页组件结构 分页组

    2024年02月12日
    浏览(61)
  • element-ui 移动端适配修改

    页面布局组件 通过col和row实现对页面进行24栏栅格布局,但在移动端,栅格会出现过小的现象,因此限制span和gutter以及flex等属性在pc端有效。 分栏偏移会使得移动端布局超出屏幕,因此也限制了offset以及响应式布局的属性等在pc端有效。 form表单组件 form 表单组件默认的lab

    2023年04月17日
    浏览(43)
  • element-ui 修改时间选择器样式

    因为elementUI的时间选择器el-date-picker是将元素直接挂载到页面的 body 中,而非自身元素下,所以使用 /deep/ 穿透也是无法定位到元素的。 解决方案: 利用时间选择器的 popper-class 属性,给其设置样式。 然后再在src/assets下创建style.scss,在该文件里面进行样式的编写 最后再引入

    2024年02月11日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包