Vue3 uses view-ui to customize the theme

1. According to the dependency package

安装view-ui-plus、less、less-loader、style-resources-loader

npm install view-ui-plus --save
npm install less@^2.7.3 --save-dev
npm install less-loader@^6.2.0 --save-dev
npm install style-resources-loader --save-dev

2. Configure view-ui

Introduce viewUI primary key and style in main.js (mian.ts)

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ViewUIPlus from 'view-ui-plus'//viewui 相关配置
import App from './App.vue'
import router from './router'
import 'view-ui-plus/dist/styles/viewuiplus.css'//viewui 相关配置

import './styles/index.less';

const app = createApp(App)

app.use(createPinia())
app.use(router).use(ViewUIPlus)//viewui 相关配置

app.mount('#app')

3. Configure the loader of less

Configure the loaderOptions of css in vite.config.js

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //关键代码
  css: {
    // // css预处理器
    // preprocessorOptions: {
    //   less: {
    //     charset: false,
    //     additionalData: '@import "./src/styles/index.less";',
    //   },
    // },
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  }
})

4. Theme configuration

First create a directory in the project, for example  styles, then create a less file stylesunder  index.lessand write the following content:

// @import '~view-ui-plus/src/styles/index.less'; 有问题
@import 'view-ui-plus/src/styles/index.less';

@primary-color: #8c0776;

Introduce ./styles/ in main.js (mian.ts)index.less

import './styles/index.less';

Or configure css preprocessorOptions in vite.config.js

css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/styles/index.less";',
      },
    },
}

Refer to related documents:

iView custom theme

Vue3.0 uses ant-design-vue to load on demand and reports an error.bezierEasingMixin()_The blog of the little sheep fighting with BUG-CSDN blog

Source address: https://gitee.com/huanglgln/vue-sys-manage