My Vue3 Class Component Typescript application gets slower to compile/build when I import bootstrap

Question

I realized that my application was much slower to build with vue-cli (either a build production or a simple dev server).

I import bootstrap this way in a SCSS file that re-writes some rules that is imported in all my other SCSS components.

@import "bootstrap/scss/bootstrap";

Here are the build time comparison screens :

Build with bootstrap

Build without bootstrap

I hope you can help me :)

Answer 1

I solved my problem by removing the imports from my components and adding my scss file in the 'loaderOptions' like as below

module.exports = {
  ...
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/base.scss";`
      },
    }
  }
};