1、用 vue-cli 初始化的vue项目
2、再build文件夹下创建一个globalLessVars.js文件，代码如下
const fs = require('fs');
module.exports = function getLessVariables(file) {
var themeContent = fs.readFileSync(file, 'utf-8')
var variables = {}
themeContent.split('\n').forEach(function(item) {
if (item.indexOf('//') > -1 || item.indexOf('/*') > -1) {
return
}
var _pair = item.split(':')
if (_pair.length < 2) return;
var key = _pair[0].replace('\r', '').replace('@', '')
if (!key) return;
var value = _pair[1].replace(';', '').replace('\r', '').replace(/^\s+|\s+$/g, '')
variables[key] = value
})
return variables
}
3、在utils.js 引入 globalLessVars.js文件
const globalLessVars = require('./globalLessVars');
4、在static文件中放入你的 theme.less 文件
5、在util.js文件中如下解析 color.less 文件
const colorsLess = globalLessVars(path.join(__dirname, '../static/color.less'));
6、再把util.js 文件中 cssLoaders方法中返回值改成以下代码
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less', {
globalVars: colorsLess
}),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
7、引用多个文件的话 就这可以这样
const colorsLess = getLessVariables(path.join(__dirname, '../static/color.less'));
const stylesLess = getLessVariables(path.join(__dirname, '../static/style.less'));
const allLess = Object.assign(colorsLess, stylesLess);
less: generateLoaders('less', {
globalVars: allLess
}
