将 Bootstrap 4 与 NuxtJS 一起使用

Posted 2023-02-22

【中文标题】将 Bootstrap 4 与 NuxtJS 一起使用

【英文标题】：Using Bootstrap 4 with 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_。

【参考方案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>