Nuxt JS - Bootstrap Vue is adding unused CSS in production code even after tree shaking

Describe the bug

I am use bootsrap vue in my nuxt js project and I always import the components that I have used on my project in order to ensure that no extra CSS gets added in my production code. But even after doing that when I created the production build of my site and went to view source I can still see many bootstrap css which are not being used anywhere in the project and also not added in the componentPlugins or in the directivePlugins.

Steps to reproduce the bug

I created my nuxt project using the CLI and selected bootstrap vue as the design system in the CLI so I have not installed them manually. In my package.json I have

"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0",

In my nuxt.config.js I have

modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt'
  ],

and here is my bodule settings:

bootstrapVue: {
    componentPlugins: [
      'NavbarPlugin',
      'LayoutPlugin',
      'ButtonPlugin',
      'FormPlugin',
      'ModalPlugin',
      'TabsPlugin'
    ],
    directivePlugins: ['VBTooltipPlugin']
  }

But in my view source I have css for .toast, for table and so much more.

Screenshots: Toast: https://i.imgur.com/wWwru8s.png Table: https://i.imgur.com/GIdGD1F.png and there is even more like these which I have no idea why they are there as technically only the components I am using, that CSS should be in the build output. Isn’t it?

Expected behavior

After building the project, only the component/plugins I am using, those CSS should be in the build.

Versions

Libraries:

• BootstrapVue: 2.0.4
• Bootstrap: 4.1.3
• Nuxt: 2.10.1

Environment:

• Device: Desktop (happening everywhere)
• OS: Win 10
• Browser: Chrome
• Version: 77

Looking forward to your response.

[vesper8]

I am having this issue as well, it’s unrelated to tree-shaking and I understand tree-shaking only applies to JS, however I would have expected PurgeCSS to be removing the unused css but currently it appears the entire bootstrap 4.5 CSS file is pasted it into the source code when using universal mode with Nuxt. I will try disabling the CSS as suggested above but I wish the nuxt module made it easier to prevent the entire css file to just be dumped like it currently is

[isaumya]

@jackmu95 Thanks for your reply, but when what’s the point of Tree shaking with Nuxt.js? I do not understand. Maybe I am misunderstanding something.