Electron-vue: Not loading styles and images in production

[tposcic]

To simply put it, my style.css and a couple of images are stored in the static folder. When i run "npm run dev" they all seem to work fine, with no console errors. When i run "npm run build" or any variation of it, it builds the app, however without any css, and images.

I see the images and css in the /dist/electron folder.

It might be my own stupidity cause i'm new at this, so what am i doing wrong?

[SimulatedGREG]

@tposcic

How are using importing your styles into your application?

[tposcic]

@SimulatedGREG

I added this in App.vue

<style> @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); @import url('/static/css/style.css'); </style>

During the build process i can see '/static/css/style.css' listed as an asset.

[EmadAdly]

@tposcic no problem for import font, but for the local style should not be used url () just import like this

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro')
@import '/static/css/style.css'

[SimulatedGREG]

@tposcic

It would be better to place your style.css inside of your src/renderer/assets directory and import like...

App.vue

@import "~@/assets/style.css";

The main benefit here, as opposed to placing in static/, is that webpack will be able to bundle the styles into the JS bundle to help produce a lighter build size. Closing since this isn't a direct issue with electron-vue, feel free to comment back any further questions.

Related: https://simulatedgreg.gitbooks.io/electron-vue/content/en/using_css_frameworks.html

[tposcic]

Thank you for the help. I moved my style.css to src/renderer/assets and everything is working fine now. Great work on electron-vue!

[SimulatedGREG]

No problem. Glad you got this resolved.