在新版的Vue CLI 3中,如何导入公共less文件在文档里已经描述的很清楚了,但是在2.*的版本中,我没有查到相关的办法,网友的办法又相当复杂,于是我推荐给大家一个很简单的办法。
首先,会用到webpack中的资源预处理器Style Resources Loader,所以需要:
npm i style-resources-loader -D
然后在build/utils.js文件中可以找到CSS预处理器的实现方式:
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + \'-loader\',
options: .assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: \'vue-style-loader\'
})
} else {
return [\'vue-style-loader\'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(\'less\'),
sass: generateLoaders(\'sass\', { indentedSyntax: true }),
scss: generateLoaders(\'sass\'),
stylus: generateLoaders(\'stylus\'),
styl: generateLoaders(\'stylus\')
}
}
简单的看下来就是需要哪种类型的样式就去加载对应的预处理器,因此只需要在加载less文件的情况下,多加一种Style Resources Loader预处理器就可以解决问题,所以只要加上如下代码,即可实现。
if (loader) {
...
}
if(loader == \'less\'){
loaders.push({
loader: \'style-resources-loader\',
options: {
patterns: path.resolve(__dirname, \'../src/assets/config/*.less\')
}
})
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
机器学习之——梯度下降算法
下一篇 :
易语言用代码体现如果、如果真和判断的区别
-
聊城市人民政府副市长洪玉振:拥抱互联网、数字世界
2026-05-19栏目: 教程
-
phpstorm运行本地PHP服务器,实现小程序可以访问的PHP后台
2026-05-19栏目: 教程
-
阿里云注册域名教程
2026-05-19栏目: 教程
-
程序员开发工具大全
2026-05-19栏目: 教程
-
开箱即用-OSS无代理备份
2026-05-19栏目: 教程
