Edit nuxt.config.js
.
- Enable Tree shaking
- Setup SCSS
export default { css: [ '~/assets/styles/app.scss' ], modules: [ 'bootstrap-vue/nuxt', ], bootstrapVue: { bootstrapCSS: false, // Or `css: false` bootstrapVueCSS: false, // Or `bvCSS: false` componentPlugins: ['NavbarPlugin'], directivePlugins: [], components: [], directives: [] },}
NOTE: I am using Navbar
component only, and Bootstrap Layout/Grid and Utilities. Check available plugins.
If you are using Bootstrap SCSS Theming, remember to remove CSS import.
Edit assets/styles/app.scss
- You can selectively import scss file
/** * Bootstrap - 4.4.1 */// @import 'bootstrap/scss/bootstrap';// Required@import "~bootstrap/scss/functions";@import "~bootstrap/scss/variables";@import "~bootstrap/scss/mixins";// Optional@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";/** * BootstrapVue - 2.4.0 */// @import '~bootstrap-vue/src/index.scss';// Include variables and utilities first@import "~bootstrap-vue/src/variables";@import "~bootstrap-vue/src/utilities";// Include custom SCSS for components// @import "~bootstrap-vue/src/components/index";@import "~bootstrap-vue/src/components/card/index";@import "~bootstrap-vue/src/components/dropdown/index";// @import "~bootstrap-vue/src/components/form-checkbox/index";// @import "~bootstrap-vue/src/components/form-file/index";// @import "~bootstrap-vue/src/components/form-input/index";// @import "~bootstrap-vue/src/components/form-radio/index";// @import "~bootstrap-vue/src/components/form-tags/index";// @import "~bootstrap-vue/src/components/input-group/index";// @import "~bootstrap-vue/src/components/modal/index";@import "~bootstrap-vue/src/components/nav/index";@import "~bootstrap-vue/src/components/navbar/index";@import "~bootstrap-vue/src/components/pagination/index";@import "~bootstrap-vue/src/components/pagination-nav/index";// @import "~bootstrap-vue/src/components/popover/index";// @import "~bootstrap-vue/src/components/table/index";// @import "~bootstrap-vue/src/components/toast/index";// @import "~bootstrap-vue/src/components/tooltip/index";// Include custom SCSS for icons// Temporary until Bootstrap v5 (maybe)// @import "~bootstrap-vue/src/icons/index";