vue3+view-ui-plus+vite+less 实现自定义iview样式

首先是结论： 

"less": "^2.7.3",

 "less-loader": "^4.1.0",

vite.config.js

resolve: {
      alias: {
        // 设置路径
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },

 '~': path.resolve(__dirname, './'),

自定义文件   \src\assets\scss\view-design.less

@import '~/node_modules/view-ui-plus/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #0066FE;
@link-hover-color:#4C94FF;
@text-color: #303133;

@import '~/node_modules/view-ui-plus/src/styles/index.less';

如果没代理 ~   就是./

@import './node_modules/view-ui-plus/src/styles/index.less';

main.js 中引入

import './assets/scss/view-design.less'

分享解决过程

如果按照官网的会报错

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

[vite] Internal server error: [less] '~view-ui-plus/src/styles/index.less' wasn't found. Tried 

暂时没找到什么原因，网上百度的方法全试了，包括以下全没用

1️⃣   改less版本

2️⃣

3️⃣

 css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: 'true; @import "@/assets/less.less"'
        },
        javascriptEnabled: true
      }
    }
  }

最后我终于找到一篇文章让把

@import '~iview/src/styles/index.less';

改为

@import '~view-design/dist/styles/iview.css';

这个改了也没用，但是给我启发了，我改成

@import '~/node_modules/view-ui-plus/src/styles/index.less';

终于正常啦！

原文地址：https://blog.csdn.net/qq_57420582/article/details/144224325

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！