Tip: Use sass-plus to compile Sass and add vendor prefixes automatically: https://www.npmjs.com/package/sass-plus
| /*! You can insert a comment here. It will be included in the CSS. */ | |
| //Custom SCSS can be placed in here, for example | |
| //Required | |
| @import "bootstrap/scss/functions"; | |
| @import "bootstrap/scss/variables"; | |
| @import "bootstrap/scss/mixins"; | |
| //Components - remove any that you don't need | |
| @import "bootstrap/scss/root"; | |
| @import "bootstrap/scss/reboot"; | |
| @import "bootstrap/scss/type"; | |
| @import "bootstrap/scss/images"; | |
| @import "bootstrap/scss/code"; | |
| @import "bootstrap/scss/grid"; | |
| @import "bootstrap/scss/tables"; | |
| @import "bootstrap/scss/forms"; | |
| @import "bootstrap/scss/buttons"; | |
| @import "bootstrap/scss/transitions"; | |
| @import "bootstrap/scss/dropdown"; | |
| @import "bootstrap/scss/button-group"; | |
| @import "bootstrap/scss/input-group"; | |
| @import "bootstrap/scss/custom-forms"; | |
| @import "bootstrap/scss/nav"; | |
| @import "bootstrap/scss/navbar"; | |
| @import "bootstrap/scss/card"; | |
| @import "bootstrap/scss/breadcrumb"; | |
| @import "bootstrap/scss/pagination"; | |
| @import "bootstrap/scss/badge"; | |
| @import "bootstrap/scss/jumbotron"; | |
| @import "bootstrap/scss/alert"; | |
| @import "bootstrap/scss/progress"; | |
| @import "bootstrap/scss/media"; | |
| @import "bootstrap/scss/list-group"; | |
| @import "bootstrap/scss/close"; | |
| @import "bootstrap/scss/toasts"; | |
| @import "bootstrap/scss/modal"; | |
| @import "bootstrap/scss/tooltip"; | |
| @import "bootstrap/scss/popover"; | |
| @import "bootstrap/scss/carousel"; | |
| @import "bootstrap/scss/spinners"; | |
| @import "bootstrap/scss/utilities"; | |
| @import "bootstrap/scss/print"; |
Thanks you very much for this.
I have a small issue though: Spinners don't seem to be included in any of the individual components.
I added @import "bootstrap/scss/spinners"; myself but you might want to put it in the _input.scss
Just letting you know
@jorn1 Hi, thanks for letting me know! This Gist hasn't been updated since Bootstrap 4.1.1, so there might be some other new components that aren't included as well.
I'll have a look on what has changed and will update the Gist shortly 😃
I've also been planning on refactoring scss-powertools, to make it faster and more efficient. I'm hoping that I can ship it at some time in the coming months!
@Klooven: Great one!
I'd add a remark if you don't mind, lost couple of time to figure it out since for me it was not clear.
Then you can compile everything in your command line with npm run build.
I'd change to: (removing the final dot since its quite confusing.
Then you can compile everything in your command line with npm run build
Tested and works with latest version.
Thanks! That sounds like a good idea. I'll change that. 👍
I'll also have a look at the new Bootstrap components and add them in here ASAP.
Spinner and toast components are now added to the SCSS - everything should now be up to date (Bootstrap 4.6.0)! 🎊
The container and max-width breakpoints components are not listed.
Are you using Bootstrap 5? Everything should be included and up-to date for Bootstrap 4 in this Gist. I'll probably create a separate Gist for Bootstrap 5 at some moment. I can add a link to it when I've created it.
Yes, I do, @Klooven, I want to use max-width instead of min-width for both breakpoint and container.
Ok, that explains it. I'll create a similar Gist for Bootstrap 5 in the coming weeks. In the meantime, feel free to look at Bootstrap's docs or repo as a reference: https://github.com/twbs/bootstrap/blob/v5.0.1/scss/bootstrap.scss 🙂
Cheers !