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

Yako · Accepted Answer · 2019-08-23 12:44:12Z

2

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

answered Aug 23, 2019 at 12:44

Yako

3,4849 gold badges47 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yako Over a year ago

However, the doc of Style-Resources says not to import actual styles: "Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower. Do not do this!" Therefore, I'm not sure to use the right approach there...

Guillermo López Over a year ago

I'm having the same issue... in the docs it states clearly do not import actual styles... have you found any solution to properly import bootstrap to Nuxt?

Yako Over a year ago

@GuillermoLópez I didn't get any updates so far. So I kept that solution. Still I'd be interested to know if there's a better way...

tettoffensive Over a year ago

I'm thinking of separating out the mixins and variables that i need in bootstrap and putting those in styleResources. Thinking that might be the right approach.

PirateApp Over a year ago

upvoted! how do I use this without bootstrap-vue i am using a theme that needs bootstrap only not bootstrap-vue, i want to customize the scss files of boostrap

mohd4482 · Accepted Answer · 2019-12-23 21:44:41Z

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
    ],
  },

atazmin · Accepted Answer · 2020-12-01 06:21:50Z

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>

Collectives™ on Stack Overflow

Using Bootstrap 4 with NuxtJS

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related