Using Bootstrap 4 with NuxtJS

Question

I'm trying to associate bootstrap 4 (bootstrap-vue) with Nuxt.

I have difficulties using mixins and variables in pages or components, although I added style-resources-module.

Here is an extract of nuxt.config.js:

/*
** Global CSS
*/
css: ["~/scss/vars.scss"],

/*
** Plugins to load before mounting the App
*/
plugins: [],
/*

/*
** Nuxt.js modules
*/
modules: [
  // Doc: https://bootstrap-vue.js.org/docs/
  "bootstrap-vue/nuxt",
  // Doc: https://github.com/nuxt-community/style-resources-module
  "@nuxtjs/style-resources"
],

/*
** Disabling Bootstrap Compiled CSS
*/
bootstrapVue: {
  bootstrapCSS: false,
  bootstrapVueCSS: false
},

/*
** Style resources
*/
styleResources: {
  scss: [
    "./scss/*.scss",
    "~bootstrap/scss/bootstrap.scss",
    "~bootstrap-vue/src/index.scss"
  ]
},

./scss/vars.scss sets variables, and also overrides Bootstrap's
(e.g. $orange: #DD7F58;

Here is an extract of one of the components:

<style lang="scss" scoped>
  .myClass{
    display: none;
    @include media-breakpoint-up(md) {
      display: block;
    }
  }
</style>

Compilation throws the following error: _No mixin named media-breakpoint-up_.

Solution 1

Here is a setup that works, if ever you meet the same issue:

nuxt.config.js:

      /*
      ** Nuxt.js modules
      */
      modules: [
        // Doc: https://bootstrap-vue.js.org/docs/
        "bootstrap-vue/nuxt",
        // Doc: https://github.com/nuxt-community/style-resources-module
        "@nuxtjs/style-resources"
      ],

      /*
      ** Disabling Bootstrap Compiled CSS
      */
      bootstrapVue: {
        bootstrapCSS: false,
        bootstrapVueCSS: false
      },

      /*
      ** Style resources
      */
      styleResources: {
        scss: "./scss/*.scss"
      },

./scss/custom.scss:

// Variable overrides
  $orange: #DD7F58;

// Bootstrap and BootstrapVue SCSS files
  @import '~bootstrap/scss/bootstrap.scss';
  @import '~bootstrap-vue/src/index.scss';

// General style overrides and custom classes
  body {
    margin: 0;
  }

Solution 2

I use the following code inside nuxt.config.js:

modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/style-resources',
  ],
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },
  styleResources: {
    scss: [
      'bootstrap/scss/_functions.scss',
      'bootstrap/scss/_variables.scss',
      'bootstrap/scss/_mixins.scss',
      'bootstrap-vue/src/_variables.scss',
      '~/assets/css/_variables.scss', // my custom variable overrides
    ],
  },

Solution 3

For Bootstrap v5, I used https://www.npmjs.com/package/@nuxtjs/style-resources

nuxt.config.js

  css: [
    '@/assets/scss/main.scss',
  ],
  styleResources: {
    scss: [
      '~/node_modules/bootstrap/scss/_functions.scss',
      '~/node_modules/bootstrap/scss/_variables.scss',
      '~/node_modules/bootstrap/scss/_mixins.scss',
      '~/node_modules/bootstrap/scss/_containers.scss',
      '~/node_modules/bootstrap/scss/_grid.scss'
    ]
  },
  modules: [
    '@nuxtjs/style-resources',
  ],

Component

<style scoped lang="scss">
.header {
  @include make-container();    
}
</style>