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?