Я создал проект Nuxt.js, который использует BootstrapVue для пользовательского интерфейса. Чтобы уменьшить размер пакета, я импортирую только те компоненты BV, которые мне нужны, для каждого компонента. Тем не менее, я все еще получал слишком большой пакет, потому что bootstrap.css и bootstrap-vue.css были объединены полностью. bootstrap.css является основной проблемой с точки зрения размера.
В попытке решить эту проблему я установил nuxt-purgecss в надежде, что он извлечет все неиспользуемые css из bootstrap.css и bootstrap-vue. css и создайте версии для пакета, который включает в себя только css для классов BootsrapVue, которые я на самом деле использую.
Сначала ни один файл вообще не связывался, и после некоторого поиска я обнаружил, что решение появилосьбыть в белом списке селекторов 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 автоматически знает, что там есть, не сообщая об этом,это было бы еще лучше!)