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
文件里的变量了。
但是
这个方法并不能实现热更新,修改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'),
即可
这个方法可以完美实现全局less变量共享,和修改变量后的热重载。
网友评论