如何在生产版本中从purgeCSS中排除BootstrapVue? (使用Nuxt.js)

时间:2020-03-26 13:35:33

标签: javascript sass bootstrap-4 nuxt.js pagespeed

在尝试进一步优化我的web应用程序页面速度时,我一直在尝试使purgeCSS模块与Nuxt.js一起正常工作-并使它在开发环境中工作。

purgeCSS在确定实际上正在使用引导程序/ -vue css的哪个部分方面存在问题,这就是为什么我决定只导入我需要的引导程序部分并让purgeCSS忽略它的原因。最终看起来像这样:

/* 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/*-评论。

此外,我还在nuxt.config.js文件中设置了purgeCSS配置,如下所示:

// 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*/]
  }

这在本地开发人员环境中就像一个魅力,但是通过在最终版本(生产)中排除所有引导样式而破坏了网站。

我的猜测是,它与css/custom.scss文件在最终版本中的命名有所不同,因此以某种方式被排除在外。

如果有人对如何在生产中也能做到这一点感到非常高兴。

提前谢谢!

0 个答案:

没有答案