vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
更新時間：2018年11月22日 14:49:21 作者：Callas
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在新版的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
這篇文章主要為大家詳細介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目(搭建過程問題小結(jié))
這篇文章主要介紹了從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目,本項目已vite開始，所以按照vite官方的命令開始，對vite+vue3+ts項目搭建過程感興趣的朋友一起看看吧2022-05-05
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue 實現(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-07
vue2.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-05
本文是腳本之家小編給大家收藏整理的關(guān)于vue項目中遇到的一點小問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法
下面小編就為大家分享一篇axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家介紹了vitejs預(yù)構(gòu)建理解及流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07