vue 中全局使用 less

1、在src/assets/css中新建global.less文件，在global.less文件中写入具体样式
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函数中添加使用全局less函数

function lessResourceLoader() { // 增加全局使用less函数
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() 替换之前less函数
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')
}

配置完成后重新运行 npm run dev即可