将 Bootstrap 4 与 NuxtJS 一起使用答案

【问题标题】：Using Bootstrap 4 with NuxtJS将 Bootstrap 4 与 NuxtJS 一起使用
【发布时间】：2019-12-28 18:40:46
【问题描述】：

我正在尝试将 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.js bootstrap-4 nuxt.js bootstrap-vue

【解决方案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;
  }

【讨论】：

但是，Style-Resources 的文档说不要导入实际样式：“导入实际样式会将它们包含在每个组件中，并且还会使您的构建/HMR 幅度变慢。不要这样做！”因此，我不确定在那里使用正确的方法......
我遇到了同样的问题...在文档中明确指出不导入实际样式...您是否找到任何解决方案将引导程序正确导入 Nuxt？
@GuillermoLópez 到目前为止我没有得到任何更新。所以我保留了那个解决方案。我仍然很想知道是否有更好的方法......
我正在考虑在引导程序中分离出我需要的 mixins 和变量，并将它们放在 styleResources 中。认为这可能是正确的方法。
点赞！我如何在没有 bootstrap-vue 的情况下使用它我使用的主题只需要 bootstrap 而不是 bootstrap-vue，我想自定义 boostrap 的 scss 文件

【解决方案2】：

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

【讨论】：

【解决方案3】：

对于 Bootstrap v5，我使用了 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',
  ],

组件

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

【讨论】：