importing Css with reactjs shows error “ Unclosed string”

Question

I'm relatively new to reactjs and i started my build with create-react-app. Ican't seem to import my css, the error log tells me that it's an unclosed string but i don't see how it's unclosed. I can't see where i went wrong..

 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

This happened when I was trying to do an @import "../../assets/image.jpg" at the top of my .css file in a project using webpack, and I could not see any "unclosed strings" anywhere.

Apparently, it did not need that import statement anywhere at all. Removing @import "../../assets/image.jpg" fixed the error, and my line background: url("../../assets/image.jpg"); still worked.

Answer 2

In reactjs you can't import any file if it's out of scope of src in case if you created your project through create-react-app.

The other way you can do is import your css file in index.html or your main html file which is responsible for head printing of your project.

Maybe this post will help you: How to import a css file in a react component?