vue-cli 2.* 中导入公共less文件
2023-09-11 14:16:54 时间
在新版的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: Object.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')
}
})
}
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- Vue_(组件)自定义指令
- django-vue 混合开发
- vue项目中抽离.vue文件中的js代码
- vue.js3: 用jszip打包压缩图片文件(vue@3.2.37 / jszip@3.10.0 / file-saver@2.0.5)
- vue.js3: 使用全局css样式文件(vue@3.2.37)
- vue.js3:用vue-qr生成二维码并下载(vue@3.2.36 / vue-qr@4.0.9)
- Vue项目基本配置封装
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- vue.js3:拖动旋转div(vue@3.2.37)
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
- 226:vue+openlayers利用swipe插件实现左卷帘功能
- 178:vue+openlayers 绘制自定义图形,导出为geojson文件
- 156:vue+openlayers 设置地图的原始图、模糊效果、色相翻转、阴影效果
- 111:vue+openlayers 通过singleclick 选择元素,更换样式( 示例代码 )
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue利用计算属性做(展开收起)(整理)