It is not clear to me how I can work with Bootstrap when using the Sage theme. Specifically, the theme uses Gulp to build assets. The assets from the /assets/ directory are compiled into the /dist/ directory, with main.css being the ‘master file’, where all partials are compiled into.
At the same time, Bootstrap is added in /bower_components/ as a dependency. The /bootstrap/ directory has its own /dist/, Gruntfile, bower.json, package.json.
Does this mean that when I want to edit Bootstrap source, I have to recompile it using Grunt (and not Gulp)? How can I then include my tweaked, recompiled bootstrap into the master script file (main.css) in the /dist/ in the site root?
Or do all these happen automatically and I can make my edits only in the /assets/ folder in the site root directory?
These might be trivial question, but I think I got a bit overwhelmed. All help will be really appreciated.
I’m presuming you’re working with Sage, but this applies to Roots 7.x as well. Generally speaking it’s bad practice to directly edit the Bootstrap source files, since they could change at anytime through bower update and that will overwrite your edits.
You also shouldn’t need to modify anything in the Gulp build process, it will detect and compile Bootstrap via bower.json settings (or Bootstrap SASS if you ran bower install bootstrap-sass and followed the SASS setup procedure in main.scss.example.
You are better off using overrides to alter what you need - check out how main.less pulls in the “common/_variables” to overwrite anything that was specified in the Bootstrap import above it.
If you then look at _variables.less: you will see some examples of what can be overriden, with the full list viewable in BS’s variables.less source file in /bower_components/.
I did not initially notice that main.less imports bootstrap. It is, indeed, much better to overwrite Bootstrap than to edit it directly.
In conclusion, I assume that all editing work that I will do will be confined to the /assets/ folder and that there is no need to run any Grunt commands in /bower_components/bootstrap/.
In conclusion, I assume that all editing work that I will do will be confined to the /assets/ folder and that there is no need to run any Grunt commands in /bower_components/bootstrap/.
Yep, exactly - I never touch anything in /bower_components/ for that reason
