vue.jsbootstrap-4sassvue-clivue-class-components

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


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 :)


Solution

  • 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";`
          },
        }
      }
    };