1、在src/assets/css中新建global.less文件，在global.less文件中寫(xiě)入具體樣式
2、使用npm/cnpm安裝less
npm install less less-loader --save
3、全局使用還需安裝 sass-resources-loader
npm i sass-resources-loader
4、配置webpack
1）找到build/utils.js文件
2）在cssLoaders函數(shù)中添加使用全局less函數(shù)

function lessResourceLoader() { // 增加全局使用less函數(shù)
var loaders = [
cssLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/css/global.less'), //全局變量的文件路徑
]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
5、 在return中用lessResourceLoader() 替換之前l(fā)ess函數(shù)
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: lessResourceLoader(), // 替換之后
// less: generateLoaders('less'), // 原webpack配置的
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}

配置完成后重新運(yùn)行 npm run dev即可