vue-cli生成的工程下蚜退，樣式使用了less語言闰靴，其中定義了一些全局變量，比如常用顏色钻注，便于樣式切換蚂且。
//theme.less
@main: #fff;
@sub: #fff;
@border: #fff;
@grey: #fff;
但是Vue單文件組建內，less變量不能共享和繼承幅恋。
每個文件都要@import一遍也挺麻煩的杏死。
不完美解決方案如下：
在./build/utils.js中
首先添加getLessVariables方法
....
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
}
....
然后給less-loader配置config
function generateLoaders(loader, loaderOptions) {
....
return{
....
less: generateLoaders('less', {
modifyVars: getLessVariables('./src/style/theme.less')
}),
....
}
...
}
這樣就能做到全局共享一個theme.less文件里的變量了。
但是
這個方法并不能實現(xiàn)熱更新捆交，修改theme后需要手動重啟npm run dev
提前把變量都寫好吧
完美解決方案如下：
使用sass的sass-resources-loader淑翼，也可以兼容less
在./build/utils.js 的exports.cssLoaders = function (options) { ... }中添加generateLessResourceLoader方法
function generateLessResourceLoader() {
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/style/theme.less'),
path.resolve(__dirname, '../src/style/mixins.less')
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
然后把下邊的
less: generateLoaders(),
替換成
less: generateLessResourceLoader('less'),
即可
這個方法可以完美實現(xiàn)全局less變量共享，和修改變量后的熱重載品追。
