vite element-plus自定义主题按需导入不生效

最新推荐文章于 2024-09-19 07:05:35 发布

前端鬼哥

最新推荐文章于 2024-09-19 07:05:35 发布

阅读量2.7k

点赞数 1

分类专栏：程序人生文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_36065510/article/details/120970845

版权

程序人生专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文档介绍了如何使用Element Plus的CLI工具编译自定义SASS主题，并将其导入到Vite项目中。首先全局安装CLI，然后修改主题变量，执行编译命令生成CSS文件。接着将生成的theme文件夹复制到主项目，并在主项目的入口文件中导入CSS。最后，更新Vite配置，引入全局SASS变量，确保按需导入组件但不导入样式。

摘要由CSDN通过智能技术生成

>公众号搜索：前端人

1. 使用官方CLI 主题工具编译sass为css文件
(node版本v10.24.1)

（1）：全局安装cli工具

npm i element-theme -g

npm i element-theme-chalk -D

（2）：修改element-variables.scss中的主题变量

（3）：变量sass为css文件

//执行命令
et

2.复制编译后的theme文件夹到主项目

3.主项目导入所有css文件

import { createApp } from 'vue';
import App from './App.vue';
import './theme/index.css'

createApp(App)
  .mount('#app');

4.修改vite配置

- node 版本切换v17.0.1

//vite.config.ts

import { defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig(({ mode, command }) => {
  return {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver({
          importStyle: false  //按需导入组件，但是不导入样式文件（sass）
        })],
      }),
      vue(),
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData:`@import "./src/theme/scss/global.scss";` // 添加公共样式sass变量(此处为全局sass变量，跟element-plus无关)
        },
      },
    }
  };
});