Actualmente tengo la siguiente estructura de directorios:
stylesheets ..modules ...._all.scss ...._colors.scss ..partials ...._all.scss ...._Home.scss ..main.scss Y en mi _Home.scss tengo:
@import '../modules/all'; .headerStyle { color: pink; font-size: 15; font-weight: 500; } Y en mi main.scss importo todos los _all.scss en la carpeta de hojas de estilo como:
@import 'modules/all' @import 'partials/all' html { font-family: 'Roboto', sans-serif; } body { margin: 0; background-color: orange }Y, por último, en mi componente, importaría la hoja de estilo así:
import '../../stylesheets/main.scss' ... <div className="headerStyle">Header</div> Sin embargo, el div no se está diseñando con .headerStyle en _Home.scss . Revisé la ruta del directorio a main.scss y es correcta, y no recibo ningún error.
Y en realidad se está aplicando lo siguiente:
body { margin: 0; background-color: orange }¿Qué podría estar haciendo mal? ¿Y hay una mejor manera de importar hojas de estilo en un componente en lugar de tener que definirlas cada vez para un componente?
Gracias de antemano y votaré/aceptaré la respuesta.
Intenté lo siguiente con éxito (usando HTML simple y la aplicación Scout para transformar SCSS a CSS):
Editar: como se mencionó, nunca he usado React, pero según esta publicación hugogiraudel.com , debería ser la misma sintaxis que en mi solución (más o menos/a primera vista ;-)).
Edición 2: comencé a usar SCSS hace solo unos días. Por lo que puedo decir, sus únicos errores son los pocos errores tipográficos que se muestran en mi ejemplo. Dado que se aplica 'cuerpo', asumo que la declaración de importación en su componente es correcta para React.
Si hay una mejor solución para hacer importaciones en componentes, alguien más debe responder. Pero parece que el autor de la publicación de blog vinculada tiene otro enfoque y también hay un repositorio de github disponible.
estructura de directorios:
- project_folder - index.html - stylesheets - main.scss - partials - _all.scss - _Home.scssíndice.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!-- NOTE: 'css_stylesheets' is the folder where the Scout-App added the transformed CSS files --> <link rel="stylesheet" href="css_stylesheets/main.css" type="text/css" /> </head> <body> <!-- NOTE: I don't know anything about React but in HTML the attribute is 'class' not 'className' Edit 3: 'className' is correct, my bad --> <div class="headerStyle">Header</div> </body> </html>hojas de estilo/main.scss
@import 'partials/all'; // Your missing here a semicolon (;) I think html { font-family: 'Roboto', sans-serif; } body { margin: 0; background-color: orange; // here too but wasn't crucial }hojas de estilo/parciales/_all.scss
@import '_Home.scss';hojas de estilo/parciales/_Home.scss
.headerStyle { color: pink; font-size: 30px; // I added here pixels because Firefox ignored it otherwise font-weight: 500; }@fingerpich encontró una buena solución para simplificar sus caminos. Puede configurar un alias para su directorio de hojas de estilo y luego importar siempre en relación con ese directorio:
Configuración del paquete web:
{ resolve: { alias: { // the path needs to resolve relative to the files where you're importing them stylesheets: path.resolve(__dirname, '../stylesheets') } } }Documentos:https://webpack.github.io/docs/configuration.html#resolve-alias
archivo de componentes:
import 'stylesheets/main.scss'También puede dejar que webpack resuelva las importaciones desde dentro de sus archivos sass agregando ~ al frente de la ruta. Luego, puede escribir sus importaciones allí como en sus archivos de componentes y se resolverán en su alias:
@import '~stylesheets/modules/_colors.scss'Documentos: https://github.com/jtangelder/sass-loader#imports
En el código general que ha proporcionado, solo falta un punto y coma (;) Al usar SCSS, tenemos que usar el punto y coma para terminar la declaración.
Aquí está el código actualizado:
@import 'modules/all'; @import 'partials/all'; html { font-family: 'Roboto', sans-serif; } body { margin: 0; background-color: orange; }