Styles in .scss file not applied

I have a react app and use .scss files for styling.

My index.js looks like this:

import './App.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>,
    document.getElementById('root')
);

My App.scss looks like this:

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body,
:global(#root) {
    min-height: 100%;
    color: var(--primary-font-color);
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}

h1 {
    color: var(--primary-font-color);
    font-size: 32px;
    font-weight: 600;
    line-height: 36px;
}

:root {

    /*Colors */
    --primary-color: #f6f5f2;
}

Now my problem is that all the styles apart from *,*::before,*::after and :root are not applied.
In the browser console I can see that the App.scss is used and the *,*::before,*::after styles are applied. Also all vars from :root can be found there.

I want to use the App.scss file for global styles, but the only way I found to apply them is with an @import("App.scss") in a component.module.scss. Importing the App.scss to every module results in as many duplicates as imports. Is this the intended way to handle scss styles?