在尝试进一步优化我的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
文件在最终版本中的命名有所不同,因此以某种方式被排除在外。
如果有人对如何在生产中也能做到这一点感到非常高兴。
提前谢谢!