错误：路径与磁盘上的相应路径不匹配

Question

我在浏览器和终端中收到一个错误，该模块未找到

找不到模块：E:\example\src\css\Login.css 与磁盘上的相应路径不匹配 login.css。

导入 css 有什么问题，或者应该安装任何模块。

这是我的 login.js 文件夹。

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import { STATUS_CODES } from 'http';
import styles from '../css/Login.css';

var modal = document.getElementById('id01');
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

class login extends Component {
  render() {
    return (
      <div>
        <h2>Modal Login Form</h2>
        <button onclick="document.getElementById('id01').style.display='block'" style={{width: 'auto'}}>Login</button>
        <div id="id01" className="modal">
          <form className="modal-content animate" action="/action_page.php">
            <div className="imgcontainer">
              <span onclick="document.getElementById('id01').style.display='none'" className="close" title="Close Modal">×</span>
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQJR6BqqLi6y004j182y-DQqexGNssQn5AHlZ7DUBXpYQe3H7P" alt="Avatar" className="avatar" />
            </div>
            <div className="container">
              <label htmlFor="uname"><b>Username</b></label>
              <input type="text" placeholder="Enter Username" name="uname" required />
              <label htmlFor="psw"><b>Password</b></label>
              <input type="password" placeholder="Enter Password" name="psw" required />
              <button type="submit">Login</button>
              <div style={{display: 'flex', justifyContent: 'space-between'}}>
                <label className>
                  <input type="checkbox" defaultChecked="checked" name="remember" /> Remember me
                </label>
                <p className="psw">Forgot <a href="#">password?</a></p>
              </div>
            </div>
            <div className="container pswp" style={{backgroundColor: 'white'}}>
            </div>
          </form>
        </div>
      </div>
    )
  }
}

export default login;

这是我的 package.json 文件夹

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-loader": "^7.1.5",
    "file-loader": "^1.1.11",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1",
    "express": "^4.16.2",
    "express-fileupload": "^0.4.0",
    "jquery": "^3.3.1",
    "body-parser": "^1.18.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

谁能帮我解决这个错误

谢谢

Answer 1

尝试将login.js文件中的Login.css替换为login.css。