Vue-cli: Static assets relative path

[maxflex]

Let's say I put an image in /static/img.png and then reference it somewhere in css like so

.wrapper {
  background: url('/static/img.png')
}

It works fine. But when deployed to non-first-level url the app is referencing assets from root.

Thus, if I were to deploy to https://example.com/app-name/, the app would be referencing https://example.com/static/img.png instead of https://example.com/app-name/static/img.png (with /app-name).

If I don't go from root in CSS background: url('static/img.png') (fronting slash removed) webpack will interpret it as a module dependency.

How do I solve this?

*vue-cli webpack 2 template

[zhaotoday]

@maxflex
I met the same problem.
You can try import your style file like:

<style lang="scss" scoped src="./theme/styles/index.scss">
</style>

I solved the problem by importing style file like this.
https://github.com/zhaotoday/vue.js/blob/master/src/app/Articles/components/ChildComp/index.vue#L19

[posva]

You can play with the option here to get the desired behaviour. Closing because it's not related to vue-cli

[jbayona89]

I'm having this issue also. I changed all my static routes from /static to /app-name/static and that worked for my production server but now my npm run dev server cannot locate the files.

Is there any way to keep the routes as /static in my code and then just process them in webpack when running 'npm run build' to show like /app-name/static?

[DoubleMarv]

Same issue here. Very annoying