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

Posted 2023-02-22

【中文标题】如何将 BootstrapVue 在 Nuxt.js 中使用 Purgecss 所需的所有内容列入白名单

【英文标题】：How do I whitelist everything I need for BootstrapVue to work with Purgecss in Nuxt.js

【发布时间】：2020-02-05 06:39:23

【问题描述】：

我创建了一个 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"> 受到尊重，除非在 col 中有 b-alert。如果有，它会向左和向右扩展得超出应有的范围。

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

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

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

【讨论】：

非常感谢特洛伊！这让我重回正轨！

我已经单独添加了引导模块，并在 custom.scss 文件中的导入周围设置了 purgecss ignore。它在本地开发模式下工作，但在生产中所有引导样式都被删除。您能否详细说明如何将所有导入的引导文件“列入白名单”以及为什么它在开发中有效，但在生产中无效？提前谢谢！

在生产模式下，一切都经过压缩器，通常会删除 cmets。