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?