vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
在新版的Vue CLI 3中,如何導(dǎo)入公共less文件在文檔里已經(jīng)描述的很清楚了,但是在2.*的版本中,我沒有查到相關(guān)的辦法,網(wǎng)友的辦法又相當(dāng)復(fù)雜,于是我推薦給大家一個很簡單的辦法。
首先,會用到webpack中的資源預(yù)處理器Style Resources Loader,所以需要:
npm i style-resources-loader -D
然后在build/utils.js文件中可以找到CSS預(yù)處理器的實現(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') } }
簡單的看下來就是需要哪種類型的樣式就去加載對應(yīng)的預(yù)處理器,因此只需要在加載less文件的情況下,多加一種Style Resources Loader預(yù)處理器就可以解決問題,所以只要加上如下代碼,即可實現(xiàn)。
if (loader) { ... } if(loader == 'less'){ loaders.push({ loader: 'style-resources-loader', options: { patterns: path.resolve(__dirname, '../src/assets/config/*.less') } }) }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開
這篇文章主要介紹了vue如何將base64流數(shù)據(jù)轉(zhuǎn)成pdf文件并在新頁面打開問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目(搭建過程問題小結(jié))
這篇文章主要介紹了從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目,本項目已vite開始,所以按照vite官方的命令開始,對vite+vue3+ts項目搭建過程感興趣的朋友一起看看吧2022-05-05vue 實現(xiàn) ios 原生picker 效果及實現(xiàn)思路解析
這篇文章主要介紹了vue 實現(xiàn) ios 原生picker 效果及實現(xiàn)思路解析,本文給大家介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下2017-12-12在Vue3中實現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細講解在Vue3中如何實現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07vue2.0學(xué)習(xí)之a(chǎn)xios的封裝與vuex介紹
最近在研究Vuex2.0,搞了好幾天終于有點頭緒了。下面這篇文章主要給大家介紹了關(guān)于vue2.0學(xué)習(xí)之a(chǎn)xios的封裝與vuex的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法
下面小編就為大家分享一篇axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03