Estoy bastante seguro de que es la ruta de archivo de mis carpetas para mi script Sass de compilación, pero he estado en esto por unas horas, así que espero que pueda ayudar... (¿tal vez hay un IDK de configuración de configuración?... .
Dos proyectos similares: 1 Vanilla, 1 React.
1. En ambos tengo node , NPM y node-sass instalados; vía: npm i --save-dev node-sass
2. Tengo el compilador Liveass funcionando. En vainilla funciona como se esperaba. En el proyecto React, live-sass-compiler sigue fallando (aunque funciona lo suficiente como para probarlo) y cuando ejecuto en la terminal: npm run compile:sass , la terminal se convierte en un nodo, nunca compila, y también parece quedarse atascado en este estado.
¡Por favor ayuda!
AHORA LAS DIFERENCIAS:
==========Rutas de archivo==========
(La ruta del archivo se indica con "./", varios archivos se indican con la sintaxis de matriz.
Vainilla (raíz):
index.html (hoja de estilo href="./STYLES/SCSS/index.css")
índice.js
./ESTILOS/ [ índice.css , índice.css.map , índice.scss ]
paquete.json (script: "compilar:sass": "node-sass ESTILOS/SCSS/index.scss ESTILOS/salida.css -w")
¡Funciona genial!
REACCIONAR (raíz):
./public/index.html (hoja de estilo href="../src/STYLES/CSS/index.css")
./src/index.js
.src/STYLES/ [ index.scss , (salida css deseada)]
paquete.json (script: "compilar:sass": "node-sass src/STYLES/index.scss src/STYLES/CSS/index.css -w")
en ambos, dentro de la carpeta node-modules, he instalado:
"Dependencias de desarrollo": {"nodo-sass": "^7.0.1"}
¡Oye, lo descubrí!
- Me deshice de live-sass-compiler (está depreciado).
- También eliminé el " script: "compile:sass": "node-s..." " ya que ya no es necesario. La compilación se realizará de forma nativa cada vez que guarde el archivo.
Terminal:
npm instalar -D descaro
sass —reloj scss:css
1. agregue un archivo .env a la raíz. Tipo interno: "SASS_PATH=src/STYLES/SCSS"
(Esto permitía ignorar las rutas relativas en versiones anteriores. No he logrado que esto funcione, pero todo lo demás parece funcionar. Puede estar depreciado... IDK).
2. incluya la importación de la ruta del archivo a la página JS en la que desea que viva el CSS:
(ejemplo (para cambios en TODA LA APLICACIÓN): index.js: import './STYLES/index.scss' //importa al componente de la aplicación
3. para importar otro archivo desde index.scss: Dentro del archivo index.scss : @use './SCSS/_unorganized.scss'; // ( "@import" pronto se depreciará, en su lugar use @use)
¡Espero que esto le ahorre tiempo a alguien más!