Error remove plenty of css in: optimize bootstrap-vue in nuxtjs - using Purecss

Question

I used the component groups and directives as Vue plugins in nuxtjs. I also use Carousel in bootstrap and 2 plugins of Vue were VueCarousel and Vue-Carousel 3D

After build in production => PurecssPlugin remove a lot of unused Css => It's good! But it breaks the pages, I have two problem:

Some components don't receive bootstrap, like col-md-4 ...
Carousel of bootstrap and 2 plugins of Vue => It's totally ruin :(

Hope someone can help me <3 Many thanks!

This is my boostrap-vue plugin:

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)

This is my nuxt config:

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'],
          }),
        )
      }
    },
  },
}

Screenshots

score 0 · Accepted Answer · answered Dec 16 '19 at 00:09

0

Purge CSS looks for static strings in the components source code to check for CSS classes to keep.

However, many of the classes used on components like col-sm-5, etc, are generated at runtime (computed based on various prop values), which PurgeCSS cannot detect.

You can either set up whitelisting rules for PurgeCSS to match particular classnames (i.e. /^col/, /^row/', /^card/, /^carousel/`, etc.),

Or forgo using PurgeCSS and just import the required SCSS from Bootstrap & BootstrapVue. Bootstrap SCSS is somewhat modular in nature. See https://getbootstrap.com/docs/4.4/getting-started/theming/#importing

answered Dec 16 '19 at 00:09

Troy Morehouse

5,320
1
27
38

Thank you for that, that fixed col but have some CSS still don't receive although I use the whitelist! Example: `col-md-12 col-lg-8 offset-lg-2` With whitelist: [/^col/, /.*(offset-lg-2)$/] => offset-lg-2 doesnt work; And I use two plugins of Vue(Carousel vs 3D) and although I wrote the whitelist for them but it's still doesn't receive! Hope you help me! – Harry Trần Dec 16 '19 at 05:38
Try this for the whitelist: `[/^col/, /^offset/, /^carousel/]` Remember that the white list matches the style names as found in the source CSS file (not from the `style` attribute, so you don't need to match leading spaces) The array shown here matches any classes found in the CSS file that start with the strings in the RegExpr – Troy Morehouse Dec 16 '19 at 21:46
Yes I knew it, but when I using directive `offset-lg=2` in `b-col` => It's doesn't receive CSS, but when adding `class="offset-lg-2"` => It's worked, lol! – Harry Trần Dec 18 '19 at 10:26
Perhaps purge CSS is matching the leading selectors as well? It might be easier to just import the required SCSS modules from Bootstrap (as shown in https://getbootstrap.com/docs/4.4/getting-started/theming/#importing) – Troy Morehouse Dec 19 '19 at 10:36

Error remove plenty of css in: optimize bootstrap-vue in nuxtjs - using Purecss

Screenshots

1 Answers1