CSS file is not working in react component - css

Question

In my react component, I have imported CSS file from the CSS directory, but the CSS isn't being applied to the component.
This is my folder structure
This is my code on the homepage.jsx file
import React from 'react';
import './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
And this is the CSS file
.homepage-container {
background: red;
height: 100vh;
}
When I put the same CSS in the index.css file which is automatically created by the create-react-app, then the styling is visible.
What is the problem here? Am I missing something?

Answer 1

As far as I know you have to import styles to specific files in this way:
import React from 'react';
import styles from './homepage-styles.scss';
class HomePage extends React.Component {
render() {
return (
<div className={`${styles[homepage-container]}`}>
<h1>Hello World</h1>
</div>
)
}
}
export default HomePage;
Notice that the [] brackets are only for multi-word scss classes. If your class would be just named homepage, then the proper way would be className={`${styles.homepage}`}

Answer 2

I don't see any problem in your code whatever you have posted.
for your reference
JSX
import React from "react";
import "./homepage-styles.scss";
export default function App() {
return (
<div className="homepage-container">
<h1>Hello World</h1>
</div>
);
}
sass
.homepage-container {
background: red;
height: 100vh;
}
Live Demo
Make sure you have installed node-sass package.