css - 在 : optimize bootstrap-vue in nuxtjs - using Purecss 中删除大量 css 时出错

Question

我在 nuxtjs 中使用组件组和指令作为 Vue 插件。我还在 bootstrap 中使用 Carousel，Vue 的 2 个插件是 VueCarousel 和 Vue-Carousel 3D

在生产中构建之后 => PurecssPlugin 删除了很多未使用的 Css => 很好!但是它破坏了页面，我有两个问题:

• 一些组件不接收 Bootstrap ，例如 col-md-4 ...
• bootstrap 的 Carousel 和 Vue 的 2 个插件 => 完全毁了 :(

希望有人能帮助我<3 非常感谢!

这是我的 boostrap-vue 插件:

import Vue from 'vue'
import {
  LayoutPlugin,
  CardPlugin,
  ButtonPlugin,
  PaginationNavPlugin,
} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(LayoutPlugin, { breakpoints: ['cols', 'sm', 'md', 'lg', 'xl'] })
Vue.use(CardPlugin)
Vue.use(ButtonPlugin)
Vue.use(PaginationNavPlugin)

这是我的 nuxt 配置:

const path = require('path')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')

module.exports = {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    .......
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href: 'https://use.fontawesome.com/releases/v5.4.2/css/all.css',
        integrity: 'sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns',
        crossorigin: 'anonymous',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Varela+Round',
      },
    ],
    script: [
      {
        src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js',
        integrity: 'sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=',
        crossorigin: 'anonymous',
      },
      {
        src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js',
        integrity: 'sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy',
        crossorigin: 'anonymous',
      },
    ],
  },
 ...
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    {
      src: '~/plugins/vue-lazy-load',
      ssr: false,
    },
    '~/plugins/boostrap-vue',
  ],
  ...
  /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/axios', '@nuxtjs/pwa'],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  ...
  build: {
    // analyze: {
    //   analyzerMode: 'static',
    // },
    filenames: {
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[chunkhash].js'),
      img: ({ isDev }) => (isDev ? '[path][name].[ext]' : 'img/[hash:7].[ext]'),
    },
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true,
          },
        },
      },
    },
    extend(config, { isDev, isClient, loaders: { vue } }) {
      if (isDev || isClient) {
        config.plugins.push(
          new PurgecssPlugin({
            // content: [],
            // css: [],
            fontFace: true,
            rejected: true,
            paths: glob.sync([
              path.join(__dirname, './pages/**/*.vue'),
              path.join(__dirname, './layouts/**/*.vue'),
              path.join(__dirname, './components/**/*.vue'),
            ]),
            whitelist: ['html', 'body'],
          }),
        )
      }
    },
  },
}

截图

• Carousel had been broken in boostrap

• It's desktop 27inch but bootstrap detected this is extra small grid:

• Don't receive bootstrap's CSS(col-lg-4 or anything):

Answer 1

清除 CSS 在组件源代码中查找静态字符串以检查要保留的 CSS 类。

但是，许多在组件上使用的类，如 col-sm-5 等，是在运行时生成的(根据各种 prop 值计算)，PurgeCSS 无法检测到。

您可以设置 whitelisting rules for PurgeCSS匹配特定的类名(即 /^col/、/^row/'、/^card/、/^carousel/` 等)，

或者放弃使用 PurgeCSS，只从 Bootstrap 和 BootstrapVue 导入所需的 SCSS。 Bootstrap SCSS 本质上是模块化的。参见 https://getbootstrap.com/docs/4.4/getting-started/theming/#importing