vue中配置mint-ui報css錯誤問題的解決方法
在vue2.0中引入了mint-ui后總是報一個css的錯誤
但是package.json中已經(jīng)配置了css-loader style-loader ,webpack.config中也已經(jīng)配置了css,還是報這個錯誤,相反,如果把webpack.config中css的配置注釋掉就不會出錯,這是為什么呢?
因為 在webpack.config中沒有設(shè)置好css引入的目錄,因為默認(rèn)情況下我們只會引入/src/目錄下的css, 但是mint-ui是要沖node_modules目錄去引入的,所以在webpack.config中css的配置中加入一項
{ test: /\.css$/, include: [ /src/, '/node_modules/mint-ui/lib/' //增加此項 ], loader: "style!css" },
當(dāng)然,. babelrc中要配置成這樣的:
{ "presets": [ "es2015","stage-0" ], "plugins": [ ["component", [ { "libraryName": "mint-ui", "style": true } ]] ] }
要確保es6轉(zhuǎn)義成es5的插件都已經(jīng)安裝,
webpack.config中要配置完整:
如果webpack.config中沒有配置presets:[‘es2015'],的話會報一個import的錯誤:
這個錯誤就是因為es6的語法轉(zhuǎn)義失敗造成的
注:webpack.config的配置要根據(jù)webpack的版本,不同的版本配置方法不一樣,我這里使用的是webpack1.0的版本
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0在table中實現(xiàn)全選和反選的示例代碼
這篇文章主要介紹了vue2.0在table中實現(xiàn)全選和反選的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Vue引入并使用Element組件庫的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01通過debug搞清楚.vue文件如何變成.js文件(案例詳解)
這篇文章主要介紹了通過debug搞清楚.vue文件如何變成.js文件,本文以@vitejs/plugin-vue舉例,通過debug的方式帶你一步一步的搞清楚vue文件是如何編譯為js文件的,需要的朋友可以參考下2024-07-07解決vue2使用腳手架配置prettier報錯prettier/prettier:context.getPhysical
這篇文章主要介紹了解決vue2使用腳手架配置prettier報錯prettier/prettier:context.getPhysicalFilename is not a function問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue項目使用$router.go(-1)返回時刷新原來的界面操作
這篇文章主要介紹了vue項目使用$router.go(-1)返回時刷新原來的界面操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue與compressor.js實現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時文件壓縮實現(xiàn)方法,通過在上傳過程中對文件進行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗,感興趣的朋友跟隨小編一起看看吧2024-03-03