double /nuxtfiles/ in replace-relative-paths

maxBenelli commented 3 years ago

when I using in scss ->

nuxt.config.js

css : [
    '~/assets/scss/style.scss'
],
styleResources : {
    scss : [
        '~/assets/scss/fonts.scss'
    ]
},
....

style.scss

.block {
    background-image : url('~assets/img/test.jpeg');
}

or fonts.scss

@font-face {
  font-family  : 'Gilroy';
  src          : url('~assets/fonts/Gilroy-Medium.eot');
  ...
  font-style   : normal;
  font-display : swap;
}

it transforms into ->

http://localhost:8000/nuxtfiles/nuxtfiles/img/a80ec01.jpeg

http://localhost:8000/nuxtfiles/nuxtfiles/fonts/7d5dc17.woff http://localhost:8000/nuxtfiles/nuxtfiles/img/e0dd053.svg#Gilroy-Medium

/nuxtfiles/nuxtfiles/ - double replace

How I can fix it ?

maxBenelli commented 3 years ago

Found the solution!

If you are using this dependencies for working with the scss

package.json

{
    "node-sass": "^4.14.1",
    "sass-loader": "10.1.1",
}

nuxt.config.js

/*
 ** Nuxt.js modules
 */
modules: [
    '@nuxtjs/style-resources',
    ...
],

and you are using structure like this

assets
  - scss
  - img
  - fonts
  ...
  etc.

you need to add the new replace after replace '/assets/' 'nuxtfiles/' dist --recursive into "replace-relative-paths" script inside package.json

replace 'nuxtfiles/(img|fonts)' '../nuxtfiles/$1'

finished script will like this

maxBenelli commented 3 years ago

Please, add me to contributors, I will add some fixes as soon as possible. Thanks

simllll commented 3 years ago

Please, add me to contributors, I will add some fixes as soon as possible. Thanks

Please create PRs :) thanks for your contribution

maxBenelli commented 3 years ago

Please, add me to contributors, I will add some fixes as soon as possible. Thanks

Please create PRs :) thanks for your contribution

Done! Hopefully, it will helps to someone

https://github.com/hokify/cordova-nuxt-demo/pull/4

hokify / cordova-nuxt-demo

double /nuxtfiles/ in replace-relative-paths #3