Tengo una aplicación de reacción y uso archivos .scss para diseñar.
Mi index.js se ve así:
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') ); Mi App.scss se ve así:
*, *::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; } Ahora mi problema es que todos los estilos aparte de *,*::before,*::after y :root no se aplican. En la consola del navegador puedo ver que se usa App.scss y se aplican los estilos *,*::before,*::after . También todos los vars de :root se pueden encontrar allí.
Quiero usar el archivo App.scss para estilos globales, pero la única forma que encontré para aplicarlos es con @import("App.scss") en un component.module.scss . La importación de App.scss a cada módulo genera tantos duplicados como importaciones. ¿Es esta la forma prevista de manejar los estilos scss ?
No se recomienda usar Sass hoy para estilos globales, porque como escribieron -> puede generar más archivos de los que desea -> el efecto es que tiene un peor rendimiento
Esta información la podemos leer en su página principal
Le recomiendo que use una vez un archivo CSS simple para variables, estilos globales, luego puede reutilizarlos fácilmente y si quiere usar Sass como desarrollador, continúe con el resto del estilo
¡Mejor!
por ejemplo que puedes hacer
Aplicación.css:
body { margin: 0; font-family: Lato, Helvetica, Arial, sans-serif; transition: all 0.3s linear; } :root { --facebook-color: #507dc0; }Y entonces:
Inicio de sesión.scss
body { .login { background-color: var(--facebook-color); } }Por supuesto, esto es solo un ejemplo.
Encontré la solución:
Parece que fue :global(#root) lo que causó el problema. Al eliminarlo, se aplican los otros estilos sin importar si están en un archivo .scss o .css .