Styles in .scss file not applied-CodePudding

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?

CodePudding user response：

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!

CodePudding user response：

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:

body {
  .login {
    background-color: var(--facebook-color);
  }
}

Of course this is only example.