React CSSファイルをあてる

前回記事（環境構築）のつづき

公開後にコメントをいただき、記載内容に誤りがあることがわかりました。参考にされる方は、最後のコメントのやりとりまでお読みください。

App.jsx に css をあてる

今回のエラーポイント

スクリーンショット

ブラウザ側で出たエラー

エラー発生時のコード

App.jsx

import { useState } from 'react'
// ファイル名 "style.module.css"だとエラーが出る バージョンの違い？
import './custom.modules.css'
// import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1 className='text1'>Hello World</h1>
      <h1 className='text2'>Hello World2</h1>
    </div>
  )
}
export default App

インストールした React のバージョン

package.json で確認すると、19.1.0 になっています。

やってみたこと

css のファイル名を変更してみた　

custom.mocules.css を、custom.css に変更して再度トライしました。

結果

成功しました

エラー解消時のコード

App.jsx

import { useState } from 'react'
// ファイル名 "style.module.css"だとエラーが出る バージョンの違い？
import './custom.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h1 className='text1'>Hello World</h1>
      <h1 className='text2'>Hello World2</h1>
    </div>
  )
}
export default App

customs.css

.text1{
  color: red;
}

.text2{
  color: blue;
}

結果から逆算して得られた結論

学習記録のため残していますが、記載内容に誤りがあります。コメント欄にて訂正しています。

React の最新バージョン（19.1.0）では読み込ませたい css ファイル名を、"〇〇.css" にする必要がある。"〇〇.〇〇.css" にするとエラーになる。