I am on sage 8.5.0 and I am designing a tags archive in Wordpress, but bootstrap has a file called _tags.scss which gives all elements with a class .tag. a with of 75% and Wordpress is giving the body a class of.tag` so everything looks really weird. Now I wanted to remove this Bower component of Bootstrap, but see no way how. All the content I find looks really old and doesn’t answer my question or it is for the newer version of Sage.
https://roots.io/modifying-bootstrap-in-sage/ this article talks about removing just lines, but where is this list for Bootstrap 4 with the .scss files? And wouldn’t it be easier to just exclude the files you don’t need?
Tags in BS4 were renamed to badges in alpha 6.
You could bump Sage to 8.5.1 or Bootstrap to alpha 6.
@mikespainhower this is not answer to my question, also every time I change version numbers with sage I need a day to fix everything again, so this is not an option.
Even if I would do this I still want to know how to stop certain components from loading.
Sage isn’t really designed to be able to bump a dependency version number without at least a little work. The issue you’re describing here, that .tag conflicts with WordPress’s default classing, was addressed and resolved as part of the Bootstrap 4 alpha cycle. So essentially @mikespainhower’s answer is correct. This is a pitfall of using alpha software and is fixable if you update to a newer alpha of Bootstrap 4.
1 Like
@mvaneijgen you can exclude certain .scss files via bower overrides.
How to include specific needed Bootstrap JS files? - this example is for Boostrap alpha 6, so you might need to edit your file list accordingly.
@mvaneijgen If upgrading your Bootstrap version is not an option you can follow these steps to selectively import Bootstrap components / partials in your project:
Find the original bootstrap sass file in
your-theme/node-modules/bootstrap/scss/bootstrap.scss
Depending on your bootstrap version this will look something similar to:
/*!
* Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "variables";
@import "mixins";
@import "custom";
// Reset and dependencies
@import "normalize";
@import "print";
// Core CSS
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
// Components
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "responsive-embed";
@import "close";
// Components w/ JavaScript
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
// Utility classes
@import "utilities";
Copy the contents of that file. In your theme main.scss file replace the line @import "~bootstrap/scss/bootstrap"; with the contents. Making sure to edit the paths like so:
// Core variables and mixins
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/custom";
...ETC
Multiline editing can be your friend here! You then simply comment out the import you don’t want included in your build. I recommend commenting out because it can make re-adding partials easier / provide insight for the next developer
Important This is “bad practice” as it requires you to update any changes to these imports should you eventually update Bootstrap via package.json
1 Like