Fail to compile scss using webpack

[Qvatra]

I have a website built with Bootstrap4, Vue and Nuxt. Nuxt uses webpack under the hood to compile bootstrap4 scss so my idea was to buy a theme and use it on top or instead of the default bootstrap. After purchase was done I realised that documentation says not much about how can I integrate scss into an existing project.

Nuxt configures webpack to use sass-loader & sass-resources-loader Below are settings that are working good for vanilla bootstrap4:

styleResources: {
   scss: [`@/node_modules/bootstrap/scss/bootstrap.scss`]
},

this builds in about 1 minute

My idea is to replace bootstrap with scss from the bought package:

styleResources: {
   scss: [`@/themes/material/assets/scss/material-dashboard.scss`]
},

This runs for about 10 minutes and crashes with: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Any thoughts?

Is there a way to combine/replace restyled scss with default bootstrap files so I would be able to use it the same way I was using bootstrap.scss?

UPDATE: by increasing space allocation for node process (--max_old_space_size=2048) and by temporarily commenting out most of the components in material-dashboard.scss I was able to finish the build but with errors: File to import not found or unreadable: . I created separate topic for that: https://github.com/creativetimofficial/ct-material-dashboard-pro/issues/233

[dragosct]

Hi, @Qvatra! We are very sorry for the late response but we had holidays. Why you don't take our product Vue Material Dashboard PRO, because in this way everything will be much easier for your project? In the HTML product the scss it's a little bit complicated because was built on top of bootstrap and also of bootstrap material design. Regards, Dragos

[Qvatra]

@dragosct10, that could be nice solution but we are using vue-bootstrap under the hood and Vue Material Dashboard PRO is not a bootstrap based... we are planning to use the theme for a specific brand that our framework can generate. Other brands will have different themes but the choice of using bootstrap-vue is already made as it comes with Nuxt.

I did browse other themes you have and indeed I have found vue + bootstrap themes but it adds custom vue components instead of adding styles... which is a no go for us as components that we use should work the same way for other brands. only style should be different

[Qvatra]

here is how I solved it: https://github.com/nuxt-community/style-resources-module/issues/48