按需引入element-plus的一点样式冲突问题

前言：最近在搭建项目，组件库用的Element-plus，开始用的是全局引入，并且对一些组件的样式进行了全局统一的更改，后面考虑到优化打包的问题，打算换成官方推荐的按需导入，由此，引出了这次的故事。

环境版本

vue: v3.3.11

vite: v5.0.10

element-plus: v2.6.0

全局引入

这是官方的全局引入教程，照搬就行。不过我在其中引入了一个自定义的样式文件，里面是对组件的统一样式修改，起初在这里是可行的。

js 复制代码

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' // 全局引入element-plus组件
import 'element-plus/dist/index.css' // 全局引入element样式文件
import '@/styles/index.scss' // 全局引入自定义样式文件

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入

后面改成以按需引入的方式来引入，下面是使用方法

PS：还得在main.ts里把引入element-plus的几行代码去掉

shell 复制代码

npm install -D unplugin-vue-components unplugin-auto-import

js 复制代码

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

问题

在照着官方的案例做的时候，问题出现了。写在自定义样式文件里面的样式不生效了！

从截图可以看出，不生效的是为了覆盖原有样式所写的自定义样式，组件原来没有的样式还是可以生效的。

看起来似乎是原有样式的权重突然就变高了，导致自定义样式文件里面的样式覆盖不了，为了验证这点，首先直接在标签行内写了style样式，发现是可以覆盖的。

而我给自定义样式加上!important也是可以解决这个情况的。但是这种方法不可行，不能因为一个样式有问题就直接加上!important

解决方法

那么应该怎么处理这个问题呢？

在这里我们可以用另一种方法引入公共样式文件：

js 复制代码

// vite.config.ts
export default defineConfig({
    css: {
  	  preprocessorOptions: {
  	    scss: {
          // 下面两种都可以
  	      additionalData: '@import "src/styles/index.scss" as *;'
          // additionalData: '@use "src/styles/index.scss" as *;'
  	    }
  	  }
  	}
})

然后再把main.ts里面引入的去掉就行了(不然会报错提示：already being loaded)

js 复制代码

// main.ts
import '@/styles/index.scss' // 去掉这行