用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文件？