使用 reactjs 导入 Css 显示错误“未关闭的字符串”答案

【问题标题】：importing Css with reactjs shows error " Unclosed string"使用 reactjs 导入 Css 显示错误“未关闭的字符串”
【发布时间】：2018-06-23 03:19:57
【问题描述】：

我对 reactjs 比较陌生，我从 create-react-app 开始构建。我似乎无法导入我的 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;

【问题讨论】：

您是否使用 create-react-app 来启动您的项目？
您收到此错误是因为url('../img/type-c.png') 超出范围，请将您的 img 移动到您的 src 文件夹中

标签： javascript css reactjs

【解决方案1】：

当我尝试在使用 webpack 的项目中的 .css 文件的顶部创建 @import "../../assets/image.jpg" 时发生这种情况，但我在任何地方都看不到任何“未闭合的字符串”。

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

【讨论】：

【解决方案2】：

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

您可以做的另一种方法是将您的 css 文件导入 index.html 或负责项目头部打印的主 html 文件。

也许这篇文章会对你有所帮助：How to import a css file in a react component?

【讨论】：

如果它对你有用，请支持我的回答。谢谢
我的分数低于 15 分，分数已记录但明显不可见 :)
是的，我明白了。