iview框架主题色的应用

1.下载

less要使用3.0.0以下的版本

npm install less@2.7.3
npm install less-loader@4.0.5

2./src/config/theme.js文件

module.exports = {yellow: {'theme-color': '#FDCE04'},blue: {'theme-color': '#547CE7'}
}

在sass中使用theme配置的颜色主题，无需引入，直接可用

.color999{color:$theme-color;
}

在less中使用theme配置的颜色主题，无需引入，直接可用

.color999{color: @theme-color;
}

3.配置vue.config.js

const theme = require('./src/config/theme')
const webTheme = theme[process.env.VUE_APP_WEB_THEME]
let str = ''
for (const key in webTheme) {str += `$${key}: ${webTheme[key]}; `
}
module.exports = {publicPath: process.env.VUE_APP_BASE_URL, // 文件获取的路径lintOnSave: false,outputDir: 'els-onlineverify', // 打包后的生成文件css: {loaderOptions: {sass: {/*additionalData: '@import "@/style/theme-' + process.env.VUE_APP_WEB_THEME + '.scss";'如果prependData报错就使additionalData:str*/prependData: str},less: {globalVars: webTheme}}},
}

image.png

4..env或.env.test或.env.prd文件配置

VUE_APP_WEB_THEME=yellow

5.src/style/iview.less文件

@import '~~view-design/src/styles/index.less';
@primary-color: @theme-color;
@link-color   : @theme-color;

6.main.js文件

import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
import './style/iview.less'
Vue.use(ViewUI)

© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务

喜欢的朋友记得点赞、收藏、关注哦！！！