首頁  >  文章  >  web前端  >  react不能解析css怎麼辦

react不能解析css怎麼辦

藏色散人
藏色散人原創
2023-01-05 11:09:492119瀏覽

react不能解析css是因為webpack配置「css/less」檔案的loader時,預設不開啟模組化或是由於引入方法不對導致的,其解決方法:1、更改下webpack的loader配置;2、在「index.css」文件中透過「@import '~antd/dist/antd.css';」方式引入即可。

react不能解析css怎麼辦

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react不能解析css怎麼辦?

  • react 模組化引入外部css檔案不生效問題處理

react 中引入外部css/less檔案時,如果直接引入=》 import “./search.less”;

在使用時直接使用className即可, 如下圖:

react不能解析css怎麼辦

但是如果採用這種方式引入=》import styles from “./search.less”;

則會發現樣式並不生效,如下圖:

react不能解析css怎麼辦

原因是, webpack配置css/less檔案的loader時,預設不會開啟模組化,這種模組化方式引入需要更改下webpack的loader配置, 如下圖:

react不能解析css怎麼辦

  • 在React中引入antd樣式不生效?

寫程式碼的時候使用antd的元件,覺得還是比較方便的(雖然antd密閉性也太好了)

之前也出現過,因為下載antd出現的問題,使用npm的源國內無法使用。可以使用淘寶的鏡像來源,如果還不行就用手機的熱點下載

可是這次出現antd樣式不生效的問題,我就裝antd了好幾遍,npm、cnpm、yarn都試了還是不行

於是在網路上找,但是其中的解決方法好像都沒有對症下藥,然後我有去官網看了下引入方法

有以下表述:

 

react不能解析css怎麼辦

我的程式碼是在scr下的其他資料夾中寫的,且js檔案沒有建立對應css文件,應該不需要引入antd/dist/antd.css

於是我想應該在入口檔案index檔案的css中引入,就成了

 

解決方法:

1、檢查antd是否引入成功

多試幾次,如果有過多的warn,那說明就懸

npm i antd
cnpm i antd
yarn add antd

2、在index.css文件中引入:

@import '~antd/dist/antd.css';

推薦學習:《react影片教學

以上是react不能解析css怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn