webpack里使用jquery.mCustomScrollbar插件的方法
malihu-custom-scrollbar-plugin是一個依賴jquery的自定義網(wǎng)頁滾動條樣式插件
網(wǎng)站: http://manos.malihu.gr/jquery-custom-content-scroller/
github: https://github.com/malihu/malihu-custom-scrollbar-plugin
jquery.mCustomScrollbar在npm上寫了在webpack里使用的方法
但是其只說啦引用js,還需要配合mCustomScrollbar的css才能正常使用。
如果直接將下載下來的mCustomScrollbar解壓,然后在js里require的話,你會發(fā)現(xiàn)使用webpack打包總是報(bào)錯,
遇到這樣的報(bào)錯時,說明你使用了mCustomScrollbar在npm上寫的引入方法,并且沒有更改下載下來的文件夾名。
只需要將jquery.mCustomScrollbar.css所在文件夾的名字修改來不含有 malihu-custom-scrollbar-plugin 即可,比如直接將這個css放在你自己的css文件夾里~~~。
因?yàn)樵赾onfig里配置了匹配到 malihu-custom-scrollbar-plugin 就是用imports-loader在加載,所以導(dǎo)致引入的這個css沒有使用css-loader去加載并報(bào)錯。
在該插件的css里使用了背景圖,webpack在打包時,除了js其他的所有類型都需要添加加載器loader,webpack 中引入圖片需要依賴 url-loader 這個加載器,
打包時遇到引用圖片報(bào)錯:
1、安裝URL-loader 加載器
npm install url-loader --save-dev
2、配置webpack的config.js 文件
module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'}, //{ test: /\.png$/, loader: "file-loader?name=images/[hash:8].[name].[ext]" } ], }
所有都配置完,就可以完美的使用webpack引用jquery.mCustomScrollbar插件啦~~~
以上是第一次使用webpack以及第一次在webpack里使用插件的經(jīng)歷,對其理解還不夠深入~~~
相關(guān)文章
el-input 標(biāo)簽中密碼的顯示和隱藏功能的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了el-input 標(biāo)簽中密碼的顯示和隱藏 ,代碼簡單易懂,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07JS創(chuàng)建或填充任意長度數(shù)組的小技巧匯總
在JavaScript 中,我們往往會遇到需要使用某些默認(rèn)值來填充數(shù)組的情況,那么都有哪些方式可以完成這樣的任務(wù)呢?這篇文章主要給大家介紹了關(guān)于JS創(chuàng)建或填充任意長度數(shù)組的小技巧,需要的朋友可以參考下2021-10-10JavaScript實(shí)現(xiàn)各種排序的代碼詳解
這篇文章給大家介紹了js實(shí)現(xiàn)各種排序功能,包括冒泡排序,選擇排序和插入排序,代碼簡單易懂,非常不錯,具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-08-08分享JavaScript監(jiān)聽全部Ajax請求事件的方法
最近在做一個小項(xiàng)目,引入了第三方j(luò)s文件,這個文件會調(diào)用XMLHttpRequest向服務(wù)器發(fā)送 Ajax請求,但是我有需要監(jiān)聽其Ajax請求的某些事件,以便額外地執(zhí)行其他腳本。于是稍微看了看監(jiān)聽 Ajax請求的事件方法,在這里分享給大家。有需要的朋友們可以參考借鑒。2016-08-08鍵盤上一張下一張兼容IE/google/firefox等瀏覽器
鍵盤上一張下一張的效果想必大家都有見到過吧,本文為大家介紹的這個兼容IE,google,firefox等主流瀏覽器2014-01-01javascript判斷機(jī)器是否聯(lián)網(wǎng)的2種方法
只有機(jī)器已經(jīng)聯(lián)網(wǎng)以后,web應(yīng)用才能啟動,下面使用javascript判斷機(jī)器是否聯(lián)網(wǎng),具體判斷代碼如下,有此需求的朋友可以參考下2013-08-08前端JS,刪除JSON數(shù)據(jù)(JSON數(shù)組)中的指定元素方式
這篇文章主要介紹了前端JS,刪除JSON數(shù)據(jù)(JSON數(shù)組)中的指定元素方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05JS前端知識點(diǎn)offset,scroll,client,冒泡,事件對象的應(yīng)用整理總結(jié)
這篇文章主要介紹了JS前端知識點(diǎn)offset,scroll,client,冒泡,事件對象的應(yīng)用,結(jié)合實(shí)例形式總結(jié)分析了offset,scroll,client,冒泡,事件對象相關(guān)功能、原理及操作注意事項(xiàng),需要的朋友可以參考下2019-06-06從數(shù)組中隨機(jī)取x條不重復(fù)數(shù)據(jù)的JS代碼
這篇文章主要介紹了從數(shù)組中隨機(jī)取x條不重復(fù)數(shù)據(jù)的JS代碼,有需要的朋友可以參考一下2013-12-12