quitar - Edición en tiempo real css/less/scss usando Chrome DevTools en meteorito

https://chrome:inspect

Question

Quiero plantear esta pregunta nuevamente.

Lo que se sugirió en la respuesta a esta pregunta es utilizar un enfoque anticuado:

1. Almacene css en public carpeta public e inclúyalo a través de <link href=
2. Agregar carpeta public al workspace google cromo devtools

No es una ciencia espacial en absoluto. Funciona, pero dos cosas que no me gustan con este enfoque:

1. Todavía no es nativo y para la producción tendré que mover los archivos de public carpeta public
2. Cada vez que edita css, Meteoro nota los cambios y vuelve a cargar la aplicación. El autor de esa respuesta lo ignoró.

Básicamente este resultado quiero:

• Comienzo el proyecto del meteoro, abra las herramientas del desarrollador de Chrome
• Cada vez que edito CSS en las herramientas de desarrollo de Chrome, cambia automáticamente en el proyecto.

Problemas:

• Meteor realiza la concatenación de todos los archivos css incluso con --debug flag on . Pero proporciona mapas fuente.
• Meteor todavía se volverá a cargar después de los cambios en el archivo, pero afortunadamente para los estilos de meteoro realiza soft injection , lo llamaría, por lo que la página no se volverá a cargar realmente. Está bien y no es realmente un problema.

Debido al primer problema y este error no puedo hacer que funcione.

Esta característica es muy importante para mí en términos de productividad.

Ofrecería una buena recompensa para algún gurú, que podría darme una dirección para resolver esto. Tal vez me señalas algunos puntos de partida para hacer un complemento para Chrome, esto también sería aceptable

Answer 1

La forma en que lo hago es bastante simple.

1. Abra su sitio web

2. Haga clic derecho -> inspeccionar elemento

3. Haga clic en Configuración - (la rueda en la esquina superior derecha).

3.1. Seleccione General pestaña General y busque la etiqueta Sources (en la parte inferior). Se busca Enable CSS source maps y Auto-reload generated CSS . Verifica ambos. Puede verificar todas las características si lo desea.

4. Seleccione la pestaña Workspace y agregue la carpeta del proyecto.

5. Actualice devtools / browser y repita todo en el paso 2.

6. Ahora, abra el Source panel (Elementos - Red - Fuente). Navega por tu carpeta y encuentra el archivo css.

7. Haga clic derecho sobre él y seleccione Map to file system resouce . Debe aparecer una ventana con pocos archivos css (depende de la configuración de su proyecto).

7.1 Seleccione el archivo css para su proyecto. Aparecerá una ventana emergente que le pedirá que reinicie devtools. Haga clic en Aceptar. Disfrutar.

Answer 2

No he probado esto con Meteor, pero para Harpjs y archivos HTML estáticos, la extensión Chrome LiveReload inyectará cambios en Chrome Dev al archivo real.