Vue.js笔记 — Vue 全局引入less变量

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
}