【发布时间】：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 无需告诉它就可以自动知道那里有什么，那就更好了！）
【问题讨论】：
标签： vue.js bootstrap-4 nuxt.js bootstrap-vue