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?
Sass is not recommended to use today for global styles, because as they wrote -> it can generate more files than you want -> effect is that you have worse performance
This information we can read on their main page
I recommend you use once simple CSS file for variables, global styles then easily you can reuse them and if you wanna use Sass as a developer then go-ahead for the rest of styling
Best!
For example what you can do
App.css:
body {
margin: 0;
font-family: Lato, Helvetica, Arial, sans-serif;
transition: all 0.3s linear;
}
:root {
--facebook-color: #507dc0;
}
And then:
Login.scss
body {
.login {
background-color: var(--facebook-color);
}
}
Of course this is only example.
I found the a solution:
Looks like it was the :global(#root) which caused the problem. Removing it makes the other styles applied no matter if they are in a .scss or .css file.