Realtime css/less/scss edition using chrome DevTools in meteor

Question

I want to raise this question again.

What was suggested in the answer to this question is to use old fashioned approach:

1. Store css in public folder, and incude it via <link href=
2. Add public folder to google chrome devtools workspace

Not a rocket science at all. Works, but two things I don't like with this approach:

1. It's still not native and for production I will have to move files from public folder
2. Each time you edit css, meteor notices changes and reloads application. Author of that answer ignored it.

Basically this result I want:

• I start meteor project, open chrome developer tools
• Each time I edit css in chrome developer tools it automatically changes in project.

Problems:

• Meteor performs concatenation of all css files even with --debug flag on. But provides source maps.
• Meteor will still reload after file changes, but fortunately for styles meteor performs soft injection, I would call it, so page will not really be reloaded. It's okay and not really a problem.

Because of 1st problem and this bug I can not get it work.

This feature is very important for me in terms of productivity.

I would offer a good bounty for some guru, who could give me a direction to solve this. Maybe you point me to some starting points to make a plugin for chrome, this also would be acceptable

Answer 1

The way I do it is pretty simple.

1. Open your website

2. Right click -> inspect element

3. Click on Settings - (the wheel in the top right corner).

3.1. Select General tab and look for Sources label (around the bottom). There search for Enable CSS source maps and Auto-reload generated CSS. Check both. You can check all the features if you want.

4. Select Workspace tab and add the project folder.

5. Refresh devtools/browser and repeat everything to step 2.

6. Now, open the Source panel (Elements - Network - Source). Navigate through your folder and find the css file.

7. Right click on it and select Map to file system resouce. A window with few css files should appear (depends on your projects config).

7.1 Select the css file for your project. A popup asking you to restart devtools will appear. Click ok. Enjoy.