ホームページ  >  記事  >  ウェブフロントエンド  >  React が CSS を解析できない場合はどうすればよいですか?

React が CSS を解析できない場合はどうすればよいですか?

藏色散人
藏色散人オリジナル
2023-01-05 11:09:492119ブラウズ

Webpack が「css/less」ファイルのローダーを構成するときに、モジュール化がデフォルトで有効になっていない、または導入方法が間違っているため、React は CSS を解析できません。解決策: 1. Webpack のローダー構成を変更します。 ; 2.「index.css」ファイルの「@import '~antd/dist/antd.css';」で導入します。

React が CSS を解析できない場合はどうすればよいですか?

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react が CSS を解析できない場合はどうすればよいですか?

  • #react 外部 css ファイルのモジュラー導入が有効にならない問題の処理

react に外部 css/less ファイルを導入する場合、直接 Import=》import “./search.less” とする場合;

以下に示すように、使用するときは className を直接使用してください:

React が CSS を解析できない場合はどうすればよいですか?

ただし、これを使用すると、スタイルのインポート =》「./search.less」からスタイルをインポートします;

以下に示すように、スタイルが有効にならないことがわかります:

React が CSS を解析できない場合はどうすればよいですか?

#その理由は、webpack が css/less ファイルのローダーを構成する場合、デフォルトではモジュール化が有効になっていないためです。このモジュール化アプローチを導入するには、以下に示すように webpack のローダー構成を変更する必要があります:

React が CSS を解析できない場合はどうすればよいですか?

  • React に antd スタイルを導入しても効果がありませんか?

コードを書くときは、antd コンポーネントを使用する方が便利だと思います (ただし、antd も非常に機密性が高いですが)

これは以前にも発生しました。antd をダウンロードしたためです。そこで発生する問題は、npmを使用したソースが中国では使用できないことです。タオバオのミラーソースを使用することもできますが、それでも動作しない場合は、携帯電話のホットスポットを使用してダウンロードしてください。

しかし、今回はantdスタイルが有効にならないという問題が発生しました。 antd を数回試しました。npm、cnpm、yarn を試しましたが、問題は解決しませんでした。いいえ

そこでオンラインで検索しましたが、どの解決策も適切ではないようでした。その後、公式 Web サイトにアクセスして確認しました導入方法

次の記述があります:

React が CSS を解析できない場合はどうすればよいですか?

私のコードはscr下の別のフォルダに書かれており、jsファイルはは対応する css ファイルを作成しないので、antd/dist/antd.css を導入する必要はないはずです

そこで、エントリーファイルのインデックスファイルの css に導入すれば良いのではないかと考えたところ、## となりました

#解決策:

1. antd が正常に導入されたかどうかを確認します

警告が多すぎる場合は、さらに数回試してください。 、停止中であることを意味します

npm i antd
cnpm i antd
yarn add antd

2。index.css ファイルに導入します:

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

推奨される学習: "

react ビデオ チュートリアル

"

以上がReact が CSS を解析できない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。