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_.

Answer 1

如果您遇到同样的问题，这里有一个有效的设置：

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;
  }