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 :

I hope you can help me :)

Depending on what you call "re-writes some rules", couldn't you import the minified css instead of the scss files? — Amaury Hanser
– Amaury Hanser, Commented Jun 22, 2022 at 12:17
Are you including this SCSS in additionalData/prependData in your sass-loader config? — Hiws
– Hiws, Commented Jun 22, 2022 at 12:30
Because all my project is in SCSS, I reviewed the size of the breakpoint, the theme color, the inputs etc.. So the minified version would not fit my needs.. — Kylian Lion
– Kylian Lion, Commented Jun 22, 2022 at 12:32
I just realized that my webpack.config.js was not taken into account, I am going to investigate it to include additionalData/prependData in my sass-loader, I will keep you informed to give you a feedback — Kylian Lion
– Kylian Lion, Commented Jun 22, 2022 at 12:40
However I do not understand what the additionalData is used for and what it will change in my case, I understood that it was to inject variables? However my problem is related to bootstrap build time — Kylian Lion
– Kylian Lion, Commented Jun 22, 2022 at 13:32

Kylian Lion · Accepted Answer · 2022-09-21 12:10:39Z

0

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

answered Sep 21, 2022 at 12:10

Kylian Lion

215 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1