CSS x Sass CSS Source Maps

[rubenmarcus]

Olá pessoal,estive lendo alguns artigos recentemente, e estou querendo aplicar aqui na Printi isso:

https://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Sei que não é algo novo, e o Tableless usa,mas queria saber quem mais usa? Sentiu muita diferença no workflow de trabalho?

Porque 80% do meu tempo é editando arquivos CSS de elementos HTML.

O trabalho que tinha de editar no máximo 5 elementos e copiar e colar em arquivos CSS no sublime,e não poder editar uma tela inteira porque eu sabia que ia acabar esquecendo alguma coisa, me deixava bem aborrecido

Li em algum lugar que tinha gente que usava o VIM e ele fazia isso também.

https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0#.mj9550wpo

É só com SASS que dá pra fazer isso?
Vi que com CSS tb dá,mas aqui eu tava usando POSTCSS e Gulp para importar arquivos css,e se fosse editar o arquivo direto no DEV Tools, o final eu ia perder toda a modularização.

Valeu , a atenção.

[raphaguasta]

@rubenmarcus Eu vi sobre isso há um bom tempo atrás também, mas na época não implementei, não me lembro por qual motivo.

Acabei de configurar meu devTools para o projeto que estou trabalhando atualmente, e pra minha surpresa ficou bem legal pra mexer nos meus .scss!

Eu uso webpack+react+sass+cssModules+postcss.

Meus sourcemaps já estavam configurados certinhos, e o DevTools sempre me levava pro arquivo correto. Foi só setar as pastas no chrome como nesse link que mandou, e funcionou show de bola! Te indico persistir nisso sim!

Na verdade, só não consegui visualizar como vc iria perder sua modularização.

[rubenmarcus]

@raphaguasta aqui a arquitetura é um src final, que esta incluido os css por range de media query, os css das paginas, e os css de estilo, esse src gera um final sem minimizar pra debug e um final minimizado.

Ai eu fiz só com CSS mesmo, peguei, e coloquei no base.html o final.css sem estar minificado ai foi boiada, editava do chrome e ja salvava..

Mas o ideal é editar os arquivos nas pastas certas.

Eu fiz uma branch pra mudar tudo pra sass, na minha mente basicamente era mudar pra scss e fazer os sourcemaps certo desse final.min.css, só que ai, tem que instalar o sass no npm, ai no gulp aqui, n sei como incluir ele, eu preciso parar um dia ou dois pra mudar isso...

o foda tambem que estamos usando alguns plugins de PostCSS ,rucksack ,partial-import e css next...

nao sei se isso iria quebrar.

[raphaguasta]

Entendi @rubenmarcus.

Cara, pra mim foi basicamente isso. Tb uso sass, e o css final passa por um processo de build do webpack, passando inclusive por plugins do postcss. Com o sourcemap certinho não teve problema.

Quando vc roda sua aplicação no chrome, no devtools mostra o .scss de desenv? Igual na imagem abaixo?

Se sim, vc clica ali na linha do arquivo, e o mapeia direto, o .scss mesmo, então quando vc editar esse arquivo no seu chrome, ele altera seu arquivo do src mesmo, e o processo de build vai rolar normal.