用reactjs导入Css显示错误“未封闭的字符串”

Question

我对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; 

Answer 1

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

显然，它根本不需要在任何地方使用该import语句。 删除@import "../../assets/image.jpg"修复了该错误，并且删除了我的行background: url("../../assets/image.jpg"); 仍然有效。

Answer 2

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

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

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