反應，css 沒有加載但正確導入？

Question

我最近開始使用電子反應樣板制作應用程序，但由於某種原因，當我從任何其他文件中導入我的 css 時，它們會被導入但未加載的主 App.tsx，這是我的 App.tsx

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Journal from './Journal';
import './App.global.css';

const Main = () => {
  return (
    <>
      <Journal />
    </>
  );
};

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Main} />
      </Switch>
    </Router>
  );
}

這是我的 Journal.tsx

import React from 'react';
import j_background from './res/j_background.svg';
import './css/Journal.css';

function Journal() {
  return (
    <>
      <div id="j_background">
        <img id="background_img" src={j_background} alt="Journal background." />
      </div>
      <p>Hey</p>
    </>
  );
}

export default Journal;

./css/Journal.css 中的所有內容都未應用，但應用程序編譯正確？

Answer 1

您的 CSS 文件必須命名為“FileName.module.css”。 因此，只需將.module 放在您的 css 文件的名稱前面，如下所示：

Journal.module.css

這在 React 版本上運行良好：

"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.0"