如何做招聘网站效果评估,百度数据分析工具,杭州淘策网站开发,wordpress加标题1. 安装sass
基于vite的项目默认不支持css预处理器#xff0c;需要开发者单独安装
npm i sass -D
2. 准备定制化的样式文件
styles/element/index.scss
/* 只需要重写你需要的即可 */
forward element-plus/theme-chalk/src/common/var.scss with ($colors: (primary: (/…1. 安装sass
基于vite的项目默认不支持css预处理器需要开发者单独安装
npm i sass -D
2. 准备定制化的样式文件
styles/element/index.scss
/* 只需要重写你需要的即可 */
forward element-plus/theme-chalk/src/common/var.scss with ($colors: (primary: (// 主色base: #27ba9b,),success: (// 成功色base: #1dc779,),warning: (// 警告色base: #ffb302,),danger: (// 危险色base: #e26237,),error: (// 错误色base: #cf4444,),)
)
3. 自动导入配置
这里自动导入需要深入到elementPlus的组件中按照官方的配置文档来 vite.config.js
自动导入定制化样式文件进行样式覆盖按需定制主题配置 import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite
import vue from vitejs/plugin-vue
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolvers// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({// 1.配置elementPlus采用sacc样式配色系统resolvers: [ElementPlusResolver({importStyle: sass})],}),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},css: {preprocessorOptions: {scss: {// 2.自动导入定制化样式文件进行样式覆盖additionalData: use /styles/element/index.scss as *;,}}}
})
