React項目是用umi腳手架搭建的AntDesign,用到一個第三方表格組件Jexcel,npm install 之后組件的樣式加載不上,犯了愁,翻閱各種資料,踏平兩個小坑。
大家都知道,安裝完成的組件都會在node_modules中,組件對應的依賴也是,包括css。官方文檔寫的倒是很簡單,組件頭部直接 import "../node_modules/jexcel/dist/jexcel.css",開發的第一反應是只有路徑沒錯,應該是可以用的。
貼上安裝后在node_modules文件夾中的目錄
事實說明確實不可以用“This relative module was not found:”(腦補笑哭的表情)
百度之,也沒搜出個所以然,冥冥之中感覺是不是有啥配置再阻撓我前進的腳步(有知道的大神請告知)
實在沒辦法,把css復制到運行文件的同目錄下 import './jexcel.css',心想着這總該行了吧,嘗試后沒有任何效果,也不報錯,故懷疑是umi腳手架的問題,果然發現第一個小坑,umi想直接引用css需要在配置文件中設置
cssLoaderOptions: {
localIdentName: '[local]'
}
(后來拓展了一下知識庫,大概知道本質是這個css-loader這個東西,后續再研究。。。)
回過頭來想剛才的那個問題,肯定不是說node_modules這個目錄的文件不能引用,突然靈光乍現(React小白,其實很簡單,只是思想還沒轉變過來,哈哈),既然 import jexcel from 'jexcel' 都能加載到這個組件的模塊里依賴的文件,那jexcel就相當於這個組件的一個入口。
所以把引用寫成這樣 import 'jexcel/dist/jexcel.css',果然大功告成。
哈哈,其實是很簡單的兩個小問題,希望能給初學者提供點經驗幫助。