IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> element-plus主题配置 -> 正文阅读

[JavaScript知识库]element-plus主题配置

element-plus主题配置

先上官网:主题

本篇文章会讲述,我是如何根据官方教程进行element-plus的主题配置的,以及遇到的坑,和坑的解决方法。

首先,我们需要创建自己的主题文件,/src/styles/element.scss(文件名随意)

根据官网,调整我们的主题:

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    'primary': ('base': #3A9BFF)
  ),
  $main: ('padding': 0)
);

然后,我们来修改vite.config.js配置文件:

import { UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自定义自动引入
import Component from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
import * as path from "path";

// https://vitejs.dev/config/
export default ():UserConfigExport => {
  return {
    resolve: {
      alias: {
        "@": path.join(__dirname, './src')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/styles/element.scss" as *;` // 路径根据配置改变,没有别名就用相对路径和绝对路径
        }
      }
    },
    plugins: [...,
      // ElementPlus({useSource: true}),  // 官方,但非必要
      ElementPlus(), // 非官方
      Component({
	      resolvers: [
	        ElementPlusResolver({
	        	importStyle: 'sass' // 非官方,必要
        	})
	      ],
	      dts: 'src/declares/component.d.ts'
    })],
    ...
  }
}

根据官方文档,我们配置ElementPlus插件的useSource属性为true。重新启动之后可以发现,主题颜色发生了改变,但是mainpadding却无效。于是我删除了useSource的配置。

由于我采用的是自动引入,所以我查看了一下unplugin-vue-components的官方配置文档。

官方配置文档中有关于element-plus解析器的详细说明,其中importStyle可以配置element-plus的样式引入方式,它默认是css。将这个属性设置为sass,重启项目,所有的主题配置就都生效了。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-17 22:02:04  更:2022-03-17 22:02:19 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 6:59:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码