如何在 Nuxt.js 中将 BootstrapVue 与 Purgecss 一起工作所需的一切列入白名单

Question

我创建了一个 Nuxt.js 项目，该项目使用 BootstrapVue 作为 UI。为了减少包的大小，我只导入每个组件所需的 BV 组件。但是，我最终还是得到了一个过大的捆绑包，因为 bootstrap.css 和 bootstrap-vue.css 被完整地捆绑在一起。 bootstrap.css 是尺寸方面的主要问题。

为了解决这个问题，我安装了 nuxt-purgecss，希望它能从 bootstrap.css 和 bootstrap 中提取所有未使用的 css- vue.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 的类似情况，无论 variant 属性如何，它都有一个白色背景。

另一个奇怪的是 <b-col md="5"> 被尊重，除非在 col 中有 b-alert。如果有，它会向左和向右扩展得比它应该的更远。

我猜我需要将一些额外的东西列入白名单，但到目前为止，我很难理解它们是什么。谁能告诉我，感激不尽！！！

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

Answer 1

Bootstrap v4.3.x CSS doesn't play well with PurgeCSS （实际上 purgeCSS doesn't play well with Bootstrap CSS)，因为所需的许多类取决于各种道具的价值。 PurgeCSS 做出有根据的猜测，但并不总是做出正确的猜测。

最好不要使用 PurgeCSS，而是使用 Bootstrap SCSS 源文件，并且只包含 bootstrap 的部分（文件） ] v4.3 SCSS 你正在使用（它是相对模块化的，虽然它可能有点混乱）。

参见：

如何在 Nuxt.js 中将 BootstrapVue 与 Purgecss 一起工作所需的一切列入白名单

How do I whitelist everything I need for BootstrapVue to work with Purgecss in Nuxt.js

vue.js

bootstrap-4

nuxt.js

bootstrap-vue