使用less+vuecli3 定制全局主题

最新推荐文章于 2024-07-23 23:03:56 发布

yyshadow.

最新推荐文章于 2024-07-23 23:03:56 发布

阅读量828

点赞数

分类专栏： less

本文链接：https://blog.csdn.net/qq_37100378/article/details/97141517

版权

本文介绍了如何在VueCLI3项目中结合Less来定制应用程序的全局主题。首先，安装了专门的主题定制插件，然后详细说明了配置vue.config.js文件的过程。此外，还展示了Less文件中的关键代码片段。

摘要由CSDN通过智能技术生成

第一步，安装主题定制插件

npm i webpack-less-theme-plugin --save-dev

配置vue.config.js 文件（vue-cli rc3.0）

const LessThemePlugin = require('webpack-less-theme-plugin');
module.exports = {
    configureWebpack:{
         plugins: [
               new LessThemePlugin({ theme: './src/assets/less/theme.less' }) //自定义主题less文件路径
          ]
   } 
}

附上less文件的主要内容：

@primary-color: #1890ff;                         // 全局主色
@link-color: #1890ff;                            // 链接色
@success-color: #52c41a;                         // 成功色
@warning-color: #faad14;                         // 警告色
@error-color: #f5222d;                           // 错误色
@font-size-base: 14px;                           // 主字号
@heading-color: rgba(0, 0, 0, .85);              // 标题色
@text-color: rgba(0, 0, 0, .65);                 // 主文本色