使用 reactjs 导入 Css 显示错误"未关闭的字符串"

Question

我对ReactJ的新手相对较新，我开始使用Create-React-App构建。ICAN似乎并没有导入我的CSS，错误日志告诉我，这是一个未缝合的字符串，但我看不出它是如何未封闭的。我看不到我在哪里错了。

import React, { Component } from 'react';
import NavBar from './components/navbar';
import './css/style.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <NavBar />
      </div>
    );
  }
}
export default App;

./src/css/style.css
Module build failed: Syntax Error
(1298:43) Unclosed string
  1296 |
  1297 | .floor-plan-c {
> 1298 |   background-image: url('../img/type-c.png');
       |                                           ^
  1299 |   background-position: 50% 50%;
  1300 |   background-size: cover;

Answer 1

这发生在我试图使用WebPack在项目的.css文件顶部进行@import "../../assets/image.jpg"时，我看不到任何地方的任何"未锁定的字符串"。

显然，它根本不需要该导入语句。删除@import "../../assets/image.jpg"修复了错误，我的行background: url("../../assets/image.jpg");仍然有效。

Answer 2

在reactjs中，如果您通过create-react-app创建项目，则无法导入任何文件。

您可以做的另一种方式是在index.html或负责您的项目头部打印的主要HTML文件中导入您的CSS文件。

也许这篇文章会帮助您：如何在React组件中导入CSS文件？