React中使用CSS模块的问题

Question

I am new to React and was learning how to use CSS modules in React but faced this error:

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'

Here is the code I am using

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

If you want to use the CSS file as a module you will need to use a webpack loader.

Alternatively you can just import "./Header.module.css"; and use the classnames to style your components