Как исключить BootstrapVue из очистки CSS в производственной сборке? (Используя Nuxt. js) - PullRequest
0 голосов
/ 26 марта 2020

При попытке дальнейшей оптимизации скорости страниц моего веб-приложения я пытался заставить модуль очистки CSS правильно работать с Nuxt. js - и заставить его работать в среде разработчика.

purge CSS имеет проблемы с определением, какая часть начальной загрузки / - vue css фактически используется, поэтому я решил просто импортировать части bootstrap, которые мне нужны, и позволить purge CSS игнорировать его , В итоге это выглядело так:

/* css/custom.scss */
/* purgecss start ignore */
$font-family-sans-serif:      "Fauna One", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace:       "Fauna One", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

$theme-colors: (
  "primary": #E40C2B,
  "secondary": #1d1d2c,
  "success": #438945
); 

@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';
@import 'bootstrap/scss/_mixins.scss';

@import 'bootstrap/scss/_buttons.scss';
@import 'bootstrap/scss/_card.scss';
@import 'bootstrap/scss/_carousel.scss';
/* The list goes on */

@import 'bootstrap-vue/src/index.scss';
/* purgecss end ignore */

Обратите внимание на /* purgecss start/end ignore/* -комментарии.

Кроме того, я настроил конфигурацию очистки CSS в моем nuxt.config. js файл, подобный следующему:

// nuxt.config.js
  purgeCSS: {
    paths: [
      'components/*.vue',
      'layouts/*.vue',
      'pages/*.vue',
      'plugins/*.js',
      'css/*.scss',
      'css/*.css'
    ],
    styleExtensions: ['.scss'],
    fontFace: true,
    kayframes: true,
    variables: true,
    whitelist: ['mq-editable-field', 'mq-math-mode', 'mqInput'],
    whitelistPatterns: [/mq*/]
  }

Это работает как очарование в среде локального разработчика, однако разбивает сайт, исключая все bootstrap стили в окончательной сборке (производство).

Я предполагаю, что это как-то связано с тем, что файл css/custom.scss назван по-другому в финальной сборке и, следовательно, каким-то образом исключен.

Был бы очень рад, если у кого-то возникла идея как сделать эту работу и в производстве.

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...