React AntDesign 引入css


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',果然大功告成。
 
哈哈,其實是很簡單的兩個小問題,希望能給初學者提供點經驗幫助。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM