React中使用CSS模塊的問題

Question

我是React的新手，正在學習如何在React中使用CSS模塊，但遇到此錯誤：

Failed to compile.
./src/components/Header/Header.js
Module not found: Can't resolve './Header.module.css' in 'C:\Users\User\Desktop\qwerty\qwerty-project\src\components\Header'

這是我正在使用的代碼

import React from "react";
import styles from "./Header.module.css";
const header = props => {
  return (
    <div className="row">
      <div className="col-md-4">
        <i className="fab fa-github"></i>
      </div>
      <div className="col-md-8">
        <nav>
          <ul className={styles.nav}>
            <li>{props.home}</li>
            <li>{props.about}</li>
            <li>{props.contact}</li>
          </ul>
        </nav>
      </div>
    </div>
  );
};

export default header;

Answer 1

如果要將CSS文件用作模塊，則需要使用webpack加載器。

或者，您可以只import "./Header.module.css"; 並使用類名對組件進行樣式設置