Seguí esta publicación Cómo usar las variables SCSS en mis componentes React o esta React y SCSS exportan una variable de scss para reaccionar para obtener la variable scss en mi aplicación de reacción, pero no funciona.
archivo myvar.scss :
$color: red; :export { color: $color; } .myclass { background-color: $color; }Archivo App.js :
import variables from './myvar.scss'; const App = () => { console.log(variables); return <div className="myclass">Hello</div> } export default App; El fondo div es rojo, por lo que myvar.scss está funcionando. Pero variables es un objeto vacío.
(versión de reacción: 17.0.1)
node_modules\react-scripts\config\webpack.config.js
module: { strictExportPresence: true, rules: [ { parser: { requireEnsure: false } }, { oneOf: [ ... { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'sass-loader' ), sideEffects: true, },Esa es una característica de webpack/css-loader y solo funciona con webpack y css-loader ( https://webpack.js.org/loaders/css-loader/#separating-interoperable-css-only-and-css-module-features )
Importante: la sintaxis :export en sus archivos SCSS/CSS solo funcionará para aquellos archivos que css-loader trata como un módulo , porque esta sintaxis es parte de una propuesta de módulo css . Puede...
foostyle.module.scssloader: 'css-loader', options: { modules: true }Se puede encontrar una publicación de blog con un ejemplo aquí: https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript (Tenga en cuenta que la publicación de blog no menciona el hecho de que los módulos css deben ser utilizado.)
$white-color: #fcf5ed; :export { whitecolor: $white-color; }y
import variables from 'variables.module.scss'; console.log(variables.whitecolor) su webpack.config.js probablemente contendrá una cadena de cargadores con css-loader como último o penúltimo (proceso cronológicamente hablando) y esto debería funcionar.
module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ], },Yo diría que intente usar así
const App = () => { const [parameters, setParameters] = useState({ fontFamily: '' }); return ( <div style={setParameters(fontFamily && { fotnType: 'font_name' })}> {content} </div> ); };Espero que esto funcione para usted.