Sylius Stylesheet Not Reloading

Question

So here's a question. I'm new to Sylius, and am working on some simple CSS updates. I have a local copy of Sylius running with the built-in webserver: server:run. I also have a development server on Digital Ocean, which runs an (almost) identical copy of Sylius, aside from the configs of course.

Something strange is happening with my CSS update, however. I made a change to .navbar-brand within web/assets/compiled/backend_backend_4.css.

This change showed up immediately on my local. On the development server, however, when pulling down the change (git), and verifying that it now exists in that file, the change doesn't seem to propegate. It's effects aren't shown, inspecting the stylesheet doesn't show them, and furthermore viewing the css file sourcecode directly in the browser does not show the change. But on the filesystem it's definitely there.

I've tried clearing the cache, to no avail.

I also checked the assetic value in both config_dev.yml files, and verified they are both set to use_controller: true

Even still, I tried dumping assetic, to no avail.

So I'm wondering what's going on. Additionally, I realize that I probably shouldn't edit CSS files within a folder called 'compiled'. I'm sure there's a way to do that using a compiler, but I'm not yet familiar with the process and am just making minor changes and learning about caching so far.

Answer 1

I've documented the solution that worked for me here. It didn't involve Gulp at all, but instead uses Assetic:

• Assets need to be installed as hard copies first (I'm not quite sure what this does exactly, but it seems like an important step because it copies a lot of assets to places. Documentation was unhelpful but it was suggested on Stack Overflow somewhere.):
  • app/console assets:install web
• Assets should be edited in web/bundles/[bundle-here]/css or js. This is frequently within syliusweb if it has to do with page styles / layouts.
  • Hint: These assets are referred to in files such as src/Sylius/Bundle/Resources/views/Backend/layout.html.twig (see the opening:

(% stylesheets

tag, or search universally for this tag). Within this tag, you'll see that stylesheets have an output to the compiled folder, but also list the bundles where they pull their original css from. You should edit one of the source css files, if you'd like your changes to end up in the destination css.

• After editing assets, dump assetic:
  • php app/console assetic:dump
  • Note - it is also possible to set an assetic watcher on these assets (google to find out how, think it's a -w flag somewhere), but this is said to only work in development mode, as it should.

After dumping assetic, the assets from the source bundles compile into their assets/compiled versions, usually combining multiple stylesheets. You should now see your asset refresh!

Answer 2

Yes you are right you shouldn't be editing the compiled files.

You should edit the source files, then run gulp

or on my system i have to explicitly run npm run gulp