We want to integrate gulp-less and browser-sync into the development process (we are aware, that grunt exists by default in shopware, but we want to continue using gulp because of our experience with it). Our basic understanding, is that, a file “ all.less ” in our Theme (extending the Responsive theme) is searched for and automatically converted to css by the built-in LESS compiler. We want to however, bypass this process, because we use a gulp-less plugin in our gulpfile.js and would like to monitor our .less files (at least the ones in our custom theme) for changes and inject the compiled css using browser-sync in realtime.
The problem we have now, is that the lessTarget defined on config_1.json seems to be the only css file loading in the head on the frontend. We thought that following your guide, “Add CSS files” (by defining a protected $css array in Theme.php), a second CSS file entry would be added in the head tag, but it seems that any css file is also compiled together with the end css file generated by the PHP based built-in LESS compiler.
We are looking for ANY OF the following solutions and it would help us greatly, if you could suggest how we could achieve any one of the following in Shopware:
A gulp solution based Shopware example with browsersync to refer to.
A method to add our custom generated css secondary to the main css (meaning right after, so that the mixins etc. could be referred to in our css file.
Could anyone share their experience regarding this please?
Thank you so much for your quick response!
I would like to proxy our local domain and stream/inject the css changes instead of reloading the browser on every change. This line (line 45), for example, in your gulpfile.js, seems to always overwrite the lessTarget defined in config_1.json:
.pipe(rename(basename(config.lessTarget)))
We reference that in a similar way, and it does inject changes too, but it seems, some css is breaking (for example, icons compiled together with the responsive theme, font-face etc.) which do not reappear unless we reload the page. I am guessing that, these reappear, because of the inbuilt LESS compiler which basically again looks for our all.less file and merges everything together (base+responsive+our custom theme all.less) in place again. I would like to be able to compile also in the same way, but it seems like in the config_1.json generated, there are not enough (or maybe not the right) entries for the less section. Could you please check if you have a different one?