无法在next.js中导入coreui / react组件。出错

Question

_app.js 正如您在下面的代码中看到的那样，我正在_app.js中全局导入css我正在尝试在Login.js中获取@ coreui / react组件，但是那一次我尝试从@ coreui / react中导入组件，但是却遇到了错误CSS无法从node_modules中导入模块。

    import "../styles/globals.css";
    import "bootstrap/dist/css/bootstrap.css";
    import "font-awesome/css/font-awesome.min.css"; 
    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />;
    } 
    export default MyApp;
  

Login.js
这是login.js，我正在从@ coreui / react导入AppAsid和AppFooter组件

    import React, { Component } from "react";
    import { AppAside, AppFooter } from "@coreui/react";
    import {
      Button,
      Card,
      CardBody,
      CardGroup,
      Col,
      Container,
      Form,
      Input,
      InputGroup,
      InputGroupAddon,
      InputGroupText,
      Row,
    } from "reactstrap"; 
    class Login extends Component {
      render() {
        return (
          <div className="app flex-row align-items-center">
            <Container>
              <Row className="justify-content-center">
                <Col md="8">
                  <CardGroup>
                    <Card className="p-4">
                      <CardBody>
                        <Form>
                          <h1>Login</h1>
                          <p className="text-muted">Sign In to your account</p>
                          <InputGroup className="mb-3">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText>
                                <i className="fa fa-user fa-sm"></i>
                              </InputGroupText>
                            </InputGroupAddon>
                            <Input
                              type="text"
                              placeholder="Username"
                              autoComplete="username"
                            />
                          </InputGroup>
                          <InputGroup className="mb-4">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText>
                                <i className="fa fa-lock fa-sm "></i>
                              </InputGroupText>
                            </InputGroupAddon>
                            <Input
                              type="password"
                              placeholder="Password"
                              autoComplete="current-password"
                            />
                          </InputGroup>
                          <Row>
                            <Col xs="6">
                              <Button color="primary" className="px-4">
                                Login
                              </Button>
                            </Col>
                            <Col xs="6" className="text-right">
                              <Button color="link" className="px-0">
                                Forgot password?
                              </Button>
                            </Col>
                          </Row>
                        </Form>
                      </CardBody>
                    </Card>
                    <Card
                      className="text-white bg-primary py-5 d-md-down-none"
                      style={{ width: "44%" }}
                    >
                      <CardBody className="text-center">
                        <div>
                          <h2>Sign up</h2>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                          </p>
                          {/* <Link to="/register"> */}
                          <Button
                            color="primary"
                            className="mt-3"
                            active
                            tabIndex={-1}
                          >
                            Register Now!
                          </Button>
                          {/* </Link> */}
                        </div>
                      </CardBody>
                    </Card>
                  </CardGroup>
                </Col>
              </Row>
            </Container>
          </div>
        );
      }
    }
    export default Login;