element-plus按需引入，修改項(xiàng)目的主題色
根據(jù)官方文檔安裝依賴
?npm install -D unplugin-vue-components unplugin-auto-importvite.config.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()],
}),
],
})新建一個(gè)文修改全局樣式的文件
在src下新建styles/element/index.scss文件，內(nèi)容如下：
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
? ? $colors: (
? ? ? ? 'primary': (
? ? ? ? ? ? //主色
? ? ? ? ? ? 'base':green
? ? ? ? )
? ? ? ? //修改其他顏色在下邊接著寫(xiě)就可以
? ? )
)
配置vite.config.js文件?
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
// 配置elementPlus采用sass樣式配置系統(tǒng)
resolvers: [ElementPlusResolver({importStyle:"sass"})],
}),
],
css:{
preprocessorOptions:{
scss:{
// 自動(dòng)導(dǎo)入定制化樣式進(jìn)行文件覆蓋
additionalData: `
@use "@/styles/element/index.scss" as *;
`
}
},
}
})配置完之后，找個(gè)按鈕驗(yàn)證一下，我這里的主題色是綠色，主要按鈕是綠色就可以了
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-498895.html
?注意：
有個(gè)需要注意的地方，按需導(dǎo)入的只要是js引用的都需要手動(dòng)導(dǎo)入樣式，比如essage組件，在頁(yè)面需要手動(dòng)引入，這樣引入之后就沒(méi)有問(wèn)題了文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-498895.html
import 'element-plus/theme-chalk/el-message.css'
import { ElMessage } from 'element-plus'到了這里，關(guān)于vue3+vite+element-plus創(chuàng)建項(xiàng)目，修改主題色的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
