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-警报的背景都是白色。

另一个怪异的事是<b-col md="5">受到尊重，除非该栏内有b条警报。如果有的话，它会向左和向右扩展得更多。

我猜想我还需要白名单一些额外的东西，但是到目前为止，我一直在努力了解它们是什么。如果有人能告诉我，我将永远感激！！！

（此外，正如我之前提到的，如果有一种配置方法，purgecss无需通知即可自动知道其中的内容，那就更好了！）

Answer 1

Bootstrap v4.3.x CSS在PurgeCSS上不能很好地工作（实际上purgeCSS在Bootstrap CSS上不能很好地工作），因为所需的许多类取决于各种道具的值。 PurgeCSS进行有根据的猜测，但并不总是做出正确的猜测。

最好的选择是不使用PurgeCSS，而是使用Bootstrap SCSS源文件，并且仅包括您正在使用的bootstrap v4.3 SCSS的部分（文件）（虽然它可以是模块化的，但相对来说还是模块化的）有点混乱）。

请参阅：

如何在Nuxt.js中将BootstrapVue所需的所有内容列入白名单以与Purgecss一起使用

1 个答案: