时间戳

首页 > 解决方案 > 将 Bootstrap 4 与 NuxtJS 一起使用

vue.js - 将 Bootstrap 4 与 NuxtJS 一起使用

问题描述

我正在尝试将 bootstrap 4 (bootstrap-vue) 与 Nuxt 相关联。

尽管我添加了 style-resources-module，但我在页面或组件中使用 mixins 和变量时遇到了困难。

这是摘录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设置变量，并覆盖 Bootstrap 的
（例如$orange: #DD7F58;

以下是其中一种成分的摘录：

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

编译会引发以下错误：_No mixin named media-breakpoint-up_.

标签： vue.jsbootstrap-4nuxt.jsbootstrap-vue

解决方案

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

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

推荐阅读