vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
在新版的Vue CLI 3中,如何導(dǎo)入公共less文件在文檔里已經(jīng)描述的很清楚了,但是在2.*的版本中,我沒有查到相關(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)文章
vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁(yè)面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁(yè)面打開問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目(搭建過(guò)程問(wèn)題小結(jié))
這篇文章主要介紹了從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目,本項(xiàng)目已vite開始,所以按照vite官方的命令開始,對(duì)vite+vue3+ts項(xiàng)目搭建過(guò)程感興趣的朋友一起看看吧2022-05-05vue 實(shí)現(xiàn) ios 原生picker 效果及實(shí)現(xiàn)思路解析
這篇文章主要介紹了vue 實(shí)現(xiàn) ios 原生picker 效果及實(shí)現(xiàn)思路解析,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12在Vue3中實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢(shì)吸引了大量開發(fā)者,在開發(fā)過(guò)程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細(xì)講解在Vue3中如何實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過(guò)具體示例代碼使概念更加清晰2024-07-07vue2.0學(xué)習(xí)之a(chǎn)xios的封裝與vuex介紹
最近在研究Vuex2.0,搞了好幾天終于有點(diǎn)頭緒了。下面這篇文章主要給大家介紹了關(guān)于vue2.0學(xué)習(xí)之a(chǎn)xios的封裝與vuex的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05記錄vue項(xiàng)目中遇到的一點(diǎn)小問(wèn)題
本文是腳本之家小編給大家收藏整理的關(guān)于vue項(xiàng)目中遇到的一點(diǎn)小問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05axios發(fā)送post請(qǐng)求,提交圖片類型表單數(shù)據(jù)方法
下面小編就為大家分享一篇axios發(fā)送post請(qǐng)求,提交圖片類型表單數(shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03