Import .scss file into .js file in Reactenvironment

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!

Answer

It turns out the server just needed to be reset / turned off. Looked at yesterday and it was working as expected.