如何将 BootstrapVue 与 Nuxt.js 中的 Purgecss 配合使用所需的所有内容列入白名单

Question

我创建了一个 Nuxt.js 项目，它使用 BootstrapVue 作为 UI。为了减少捆绑包的大小，我仅导入每个组件所需的 BV 组件。然而，我仍然得到了一个过大的捆绑包，因为 bootstrap.css 和 bootstrap-vue.css 被完整地捆绑在一起。bootstrap.css 的大小是主要问题。

为了解决这个问题，我安装了 nuxt-purgecss，希望它能从 bootstrap.css 和 bootstrap-vue.css 中提取所有未使用的 css，并为该包创建仅包含我所使用的 BootsrapVue 类的 css 的版本。我实际上正在使用。

起初，这两个文件都没有被捆绑，经过一番搜索，我发现解决方案似乎是将我正在使用的 BootstrapVue 选择器列入白名单。（尽管如果有人能向我展示一种我不需要这样做并且 purgecss 可以自行评估它的方法，我会很高兴！）

nuxt.config.js 的相关部分现在如下：

  modules: [
    'nuxt-purgecss'
  ],
  purgeCSS: {
    mode: 'postcss',
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'node_modules/bootstrap-vue/es/**/**/*.js',
      'node_modules/bootstrap-vue/**/*.js'
    ],
    styleExtensions: ['.css'],
    whitelist: [
      'html',
      'body',
      'navbar',
      'nuxt-progress',
      'b-navbar',
      'b-navbar-toggle',
      'b-navbar-brand',
      'b-navbar-nav',
      'b-nav-item',
      'b-alert',
      'b-collapse',
      'b-nav-item-dropdown',
      'b-dropdown-item',
      'b-container',
      'b-row',
      'b-col',
      'b-card',
      'b-form',
      'b-form-group',
      'b-form-input',
      'b-button',
      'b-modal'
    ],
    whitelistPatterns: [/^b-/, /nav/]
  },
  build: {
    /*
     ** You can extend webpack config here
     */
    extractCSS: true, // TODO: Necessary?
    extend(config, ctx) {
      // if (ctx.isDev) {
      //   config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      // }
      config.devtool = 'source-map'
    }
  }

完成上述操作后，我发现我构建的解决方案几乎按预期呈现，但我遇到了几个我无法理解的问题：

<template>
  <b-navbar
    sticky
    toggleable="md"
    type="dark"
    variant="dark"
  >
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-navbar-brand to="/">Application</b-navbar-brand>
    <b-collapse id="nav_collapse" is-nav>
      <b-navbar-nav class="ml-auto mr-4">
        <auth-nav-item />
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

这会渲染，但类型和变体没有生效，即它应该是黑色背景栏上的白色文本，但实际上是白色的白色（因此对用户来说实际上是不可见的）。我可以通过应用本地样式来修复此问题，但我我真的很想了解我需要做什么才能使其按预期运行。

我的 b-alert 也有类似的情况，无论变体属性如何，它都有白色背景。

另一个奇怪的是，<b-col md="5">除非山口内出现 b 警报，否则这一点会受到尊重。如果有的话，它会比应有的向左和向右扩展得更远。

我猜测我需要将一些额外的内容列入白名单，但到目前为止，我正在努力理解它们是什么。如果有人能告诉我，我将不胜感激！！！

（另外，正如我之前提到的，如果有一种配置方法，让 purgecss 自动知道那里有什么，而不必告诉它，那就更好了！）

Answer 1

Bootstrap v4.3.x CSS 不能很好地与 PurgeCSS 配合使用（实际上 purgeCSS 不能很好地与 Bootstrap CSS 配合使用），因为许多所需的类取决于各种 props 的值。PurgeCSS 会做出有根据的猜测，但它并不总是做出正确的猜测。

最好的选择是不要使用 PurgeCSS，而是使用 Bootstrap SCSS 源文件，并且仅包含您正在使用的 bootstrap v4.3 SCSS 的部分（文件）（它是相对模块化的，尽管它可能有点令人困惑） 。

看：

• https://getbootstrap.com/docs/4.3/getting-started/theming/#importing
• https://bootstrap-vue.js.org/docs/reference/theming