How to change .scss file and immediately have a preview in the browser

[lucaVV]

Hi,
I’m working on a project with Sage + Bedrock + Tailwind.
When i use yarn start, browsersync works, and it opens a chrome tab where I can see changes in the HTML/CSS whenever I apply/remove css classes that comes with the framework Tailwind. And that’s fine!

But when I add some custom classes to one of the .scss files (even main.scss), and I apply them to HTML elements, the dist folder doesn’t get compiled again, and so I can’t immediadly see changes in the browser, untill I stop browsersync, and re-run yarn start.
I already know that the styles are just injected by browsersync and that the dist folder is getting “ignored” after that, but re-running “yarn start” to see changes take to much time.

So, is there a way to have the dist immediatly rebuild when I make changes to .scss files, so that I can se them in the browser? Or generally, is there a better way to handle the delevopment process?

Thanks a lot.

Luca

[alwaysblank]

The dist folder is not rebuilt by yarn start. When running that command, styles should be inserted into the document by JavaScript. When you enqueue your styles in WP are you using the asset() function?

[lucaVV]

Hi @alwaysblank,
thanks for your reply.
I simply installed Sage and I am trying to use it from scratch.

I can notice I enqueue my styles using the built-in function, in setup.php:

 /**
 * Theme assets
 */
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);

    if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
}, 100); 

I understand dist is not created each time I edit a file, but using ‘yarn start’ command I would like to be able to add (just for example) a custom class in global.scss and I would like to see immediately changes.

May you try to further help me?

My best

[Davide_Prevosto]

Hello @alwaysblank and @lucaVV,

I can reproduce the same identical issue, working on OSx, Sage 9.0.9, Bedrock, and… Tailwind!
Trying to use Bootstrap, BrowserSync is working fine (as aspected), doing the same identical things with Tailwind it seems a problem occurred.

Files are compiled without any error (apparently) but page doesn’t change until I yarn build or until I stop yarn start and relaunch it.

Kind regards

[Cato]

Having the same issue here… any ideas on how to fix this or tweak it so it reloads after changing scss files?

[lucaVV]

Hi @alwaysblank @Davide_Prevosto @Cato
I’ve tried again with a fresh installation. I used Local by Flywheel and I’ve install Composer on the project folder, then Sage (with Tailwind as framework) and finally Bedrock (configuring the .env file and the site.conf).
@Cato maybe check (if you want to try with Local):
1 - https://localbyflywheel.com/community/t/php-version-for-composer/602
2 - https://roots.io/sage/docs/theme-installation/
3 - https://roots.io/guides/local-bedrock-development-with-local-by-flywheel/

Now both Tailwind utilities and custom classes work right and the browser apply the new styles at every change saved.