vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
在新版的Vue CLI 3中，如何導(dǎo)入公共less文件在文檔里已經(jīng)描述的很清楚了，但是在2.*的版本中，我沒(méi)有查到相關(guān)的辦法，網(wǎng)友的辦法又相當(dāng)復(fù)雜，于是我推薦給大家一個(gè)很簡(jiǎn)單的辦法。
首先，會(huì)用到webpack中的資源預(yù)處理器Style Resources Loader，所以需要：
npm i style-resources-loader -D
然后在build/utils.js文件中可以找到CSS預(yù)處理器的實(shí)現(xiàn)方式：
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')
}
}
簡(jiǎn)單的看下來(lái)就是需要哪種類型的樣式就去加載對(duì)應(yīng)的預(yù)處理器，因此只需要在加載less文件的情況下，多加一種Style Resources Loader預(yù)處理器就可以解決問(wèn)題，所以只要加上如下代碼，即可實(shí)現(xiàn)。
if (loader) {
...
}
if(loader == 'less'){
loaders.push({
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/assets/config/*.less')
}
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中require報(bào)錯(cuò)require is not defined問(wèn)題及解決
這篇文章主要介紹了vue3中require報(bào)錯(cuò)require is not defined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
實(shí)際項(xiàng)目中偶爾會(huì)遇到給項(xiàng)目頁(yè)面背景加水印的需求,這篇文章主要為大家介紹了Vue使用canvas實(shí)現(xiàn)水印功能的示例代碼，希望對(duì)大家有所幫助2023-07-07
vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法
這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單一篩選、刪除篩選條件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作
這篇文章主要介紹了vue+element使用動(dòng)態(tài)加載路由方式實(shí)現(xiàn)三級(jí)菜單頁(yè)面顯示的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js引用背景圖background無(wú)效的3種解決方案
這篇文章主要介紹了vue.js引用背景圖background無(wú)效的3種解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
最近公司在研發(fā)app,選擇了基于Vue框架的vux組件庫(kù)，現(xiàn)總結(jié)在實(shí)現(xiàn)上拉刷新功能遇到的坑,感興趣的朋友參考下吧2018-02-02