BrowserSync é uma ótima ferramenta para injetar automaticamente novos css no seu navegador cada vez que ele é modificado.
Se você ainda não usou o Grunt, confira o Guia de primeiros passos.
O que é Browsersync?
O Browsersync torna seu fluxo de trabalho de teste de navegador mais rápido, sincronizando URLs, interações e alterações de código em vários dispositivos. É muito rápido e .
Configurando o BrowserSync
É bem simples de usar. Em primeiro lugar, inicie o “grunt watch” em uma janela do terminal.
grunt watch
Em seguida, abra uma segunda janela de terminal e instale a sincronização do navegador, se você ainda não tiver:
npm install grunt-contrib-watch --save-dev
Em seguida, mude para o diretório css em pub / static, por exemplo:
cd pub/static/frontend/MyTheme/default/en_GB/css
Agora, inicie a sincronização do navegador com o seguinte (ajuste o URL do proxy para a instalação da sua loja)
browser-sync start --proxy 'dev.www.mystore.com' --files="*.css"
Isso iniciará a abertura de uma guia do navegador para: http: // localhost: 3000, que carregará sua loja.
Conclusão
Agora, à medida que você faz alterações em seus arquivos LESS, o comando grunt watch re-compila o CSS, que por sua vez aciona a sincronização do navegador para injetar o novo css.
Tudo sem você ter que levantar um dedo.
Observação: se você estiver usando o docker, atualmente eu executo a sincronização do navegador fora da janela de encaixe e o grunhido é executado internamente. Isso funciona muito bem.