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)