2015-08-16 17 views
9

Voglio sollevare nuovamente la domanda this.Realtime css/less/scss edition utilizzando chrome DevTools in meteor

Ciò che è stato suggerito nella risposta alla this domanda è quello di utilizzare approccio vecchio stile:

  1. Conservare css nella cartella public e incude tramite <link href=
  2. Aggiungi cartella public to google devtools cromo workspace

Non è affatto una scienza missilistica. Opere, ma due cose non mi piace di questo approccio:

  1. Non è ancora nativa e per la produzione dovrò spostare file da public cartella
  2. Ogni volta che si modifica css, comunicazioni di meteore cambiamenti e ricariche applicazione. L'autore della risposta that l'ha ignorato.

Fondamentalmente questo risultato che voglio:

  • comincio progetto meteora, strumenti di sviluppo aperto cromo
  • Ogni volta che mi Modifica CSS in strumenti di sviluppo Chrome passa automaticamente in progetto.

enter image description here

Problemi:

  • Meteor esegue la concatenazione di tutti i file CSS even with --debug flag on. Ma fornisce mappe di origine.
  • Le meteore si ricaricano ancora dopo le modifiche al file, ma fortunatamente per gli stili meteor esegue soft injection, lo chiamerei, quindi la pagina non verrà realmente ricaricata. Va bene e non è davvero un problema.

A causa del 1 ° problema and this bug Non riesco a farlo funzionare.

Questa funzione è molto importante per me in termini di produttività.

Offrire una buona taglia per qualche guru, che potrebbe darmi una direzione per risolvere questo. Forse mi stai indicando alcuni punti di partenza per creare un plugin per Chrome, anche questo sarebbe accettabile

+0

Potrei dover leggere tutto due volte poiché non è molto chiaro, ma come primo suggerimento rapido, hai considerato di utilizzare qualcosa come gli spazi di lavoro in Devtools [https://developer.chrome.com/devtools/docs/workspaces] (https://developer.chrome.com/devtools/docs/workspaces) –

+0

@RaduChiriac Spiacente, le modifiche per rendere chiara la mia domanda sarebbero apprezzate. Sì, è stato suggerito nella risposta alla vecchia domanda. L'area di lavoro è ciò che dobbiamo usare di sicuro. Ma non funziona con i css concatenati delle meteore. – ZuzEL

+0

Hai provato a utilizzare la sincronizzazione del browser da npm? –

risposta

1

Il modo in cui lo faccio è piuttosto semplice.

  1. Apri il tuo sito web

  2. clic destro -> ispezionare elemento

  3. Fare clic su Impostazioni - (la ruota nell'angolo in alto a destra).

3.1. Selezionare la scheda General e cercare l'etichetta Sources (nella parte inferiore). Sono ricercati per Enable CSS source maps e Auto-reload generated CSS. Controlla entrambi. Puoi controllare tutte le funzionalità se vuoi.

  1. Selezionare la scheda Workspace e aggiungere la cartella del progetto.

  2. Refresh devtools/navigatore e ripetere tutto al punto 2.

  3. Ora, aprire le Source panel (Elementi - Rete - Fonte). Naviga nella tua cartella e trova il file css.

  4. Fare clic con il pulsante destro del mouse e selezionare Map to file system resouce. Dovrebbe apparire una finestra con pochi file CSS (dipende dalla configurazione del tuo progetto).

7.1 Selezionare il file css per il progetto. Apparirà un popup che ti chiede di riavviare devtools. Clicca ok. Godere.

+0

Sei sicuro di farlo con 'meteora'? – ZuzEL

+0

Non importa se è meteorite o no. Tutto quello che devi fare è puntare il percorso verso i tuoi file css/scss/less. Il browser farà il resto – Stanimir

+0

Ho collegato la mia domanda a quella simile e la risposta era esattamente uguale alla tua, ma più specificata per la meteora. http://stackoverflow.com/a/22755210/2555999 Non sono a conoscenza di ciò che dice la documentazione di Google, l'unica ragione è che non funziona con Meteor. Vedi la mia domanda. Ho detto che la meteora concatena tutti i css in uno, gli strumenti di chrome dev non possono gestirli. – ZuzEL

0

Non l'ho provato con Meteor, ma per i file HTML statici di Harpjs & lo Chrome LiveReload extension immetterà le modifiche in Chrome Dev al file effettivo.

Problemi correlati