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)