Global.scss
/src/styles/global/Global.scss
.grid {
display: grid;
}
Meta.js
/src/components/Meta.js
This file contains the import statements for the .scss
file
import "../styles/global/Global.scss";
index.js
/src/pages/index.js
This file contains the import statement for the component import Meta from '../components/Meta';
Followed by
function Home() {
return (
<div className="container">
<Meta />
<Header />
<p>Hello world!</p>
<Footer />
</div>
)
}
export default Home;
Footer.js
/src/components/Footer.js
class Footer extends React.Component {
render() {
return (
<footer className="container grid">
<div className="footer-primary-nav">
<p>Primary Nav</p>
</div>
</footer>
);
}
}
export default Footer;
The class .grid
isn't being loaded into the Footer.js
from the Global.scss
file.
On paper, I thought this would be working, but the .grid
styling isn't being loaded on the page.Any help would be greatly appreciated!
It turns out the server just needed to be reset / turned off. Looked at yesterday and it was working as expected.