CODEWITHSUNDEEP
sasscreate-react-appcore-ui
Abraham L
Abraham L

Reputation: 426

Slow recompilation time when importing SCSS file into another with create react app

I have a project that uses CoreUI and has a file structure that looks like this:

src
  /scss
    style.scss
  /components
    /Component
      Component.tsx
      Component.scss

The CoreUI library is built on top of Bootstrap and requires the style files to be imported independently. Those files are imported on the style.scss file like so:

@use '@coreui/coreui/scss/coreui';
@import '@coreui/chartjs/scss/coreui-chartjs';

However, when trying to import the first scss file above into Component.scss (using the @use directive as well) to reuse Bootstrap classes, the compilation time slows down quite considerably, making it really painful to make changes to any styles. I've already tried to use the @forward rule too, as well as importing the style.scss file into a partial and importing the partial without success.

There's probably a simple workaround for this but I haven't been able to find it. How can I keep the compilation times short when reusing sass files?

March 2023 update: No longer a part of this project, so I am no longer able to post any updates myself. I am leaving the question up for others who might want to see/give an answer in the future

Upvotes: 3

Views: 673

Answers (0)

Related Questions