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)
