Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fail to compile scss using webpack #232

Closed
Qvatra opened this issue Apr 23, 2019 · 3 comments
Closed

Fail to compile scss using webpack #232

Qvatra opened this issue Apr 23, 2019 · 3 comments

Comments

@Qvatra
Copy link

Qvatra commented Apr 23, 2019

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: #233

@dragosct
Copy link
Member

dragosct commented May 2, 2019

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
Copy link
Author

Qvatra commented May 7, 2019

@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
Copy link
Author

Qvatra commented May 13, 2019

here is how I solved it:
nuxt-modules/style-resources#48

@Qvatra Qvatra closed this as completed May 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants