Assets does not compiled at nuxt-edge:latest

[jyqry]

Version

nuxt-edge

Reproduction link

.

Steps to reproduce

I'm using nuxt-edge version "latest"

since I'm re-installed packages (node_modules),
this bug showed up.

so I'm guessing latest build has this bug

What is expected ?

~assets/icon.svg (in style section)
should be turn into
data:image/svg+xml;base64 ...)

What is actually happening?

assets doesn't compiled.
for example) background-image: url(/assets/icon.svg)

Additional comments?

Assets compiled with 2.0.0-25468832.6578bd7
not compiled with latest build which 2.0.0-25569931.85a8af5

I'm using nuxt starter template

_{This bug report is available on Nuxt community (#c7565)}

[manniL]

Hey 👋

Have you tried ~/assets/.. vs. ~assets/.../?

[jyqry]

@manniL
Thank you for your response :)

Ah sorry
I tried ~/assets/.. in <style>
not ~assets/..

I just tried ~assets/.. in <style> and this works well.
and ~/assets/.. / ~assets/.. both works well in <template>

I'm wondering why doesn't work ~/assets/.. with <style> section.
is this a feature?

[jyqry]

For more information,

Steps to reproduce

1. vue init nuxt-community/starter-template <project-name>
2. cd <project-name>
3. yarn
4. yarn add nuxt@npm:nuxt-edge

• package.json changed to "nuxt": "npm:nuxt-edge" now.

5. add icon.svg in /assets folder
6. modify /pages/index.vue to

<template>
  <div>
    <img src="~/assets/icon.svg"> <!--// works fine-->
    <img src="~assets/icon.svg"> <!--// works fine too-->

    <div class="icon-1"></div> <!--// this tag styled in <style />-->
    <div class="icon-2"></div> <!--// this tag styled in <style />-->
  </div>
</template>
<style>
.icon-1 {
  width: 100px;
  height: 100px;
  background-image: url('~/assets/icon.svg'); /* this is NOT compiled. however, "2.0.0-25468832.6578bd7" version has no problem with compile */
}
.icon-2 {
  width: 100px;
  height: 100px;
  background-image: url('~assets/icon.svg');  /* this is compiled as expected. */
}
</style>

[jyqry]

here is my screenshots

1. component

2. http://localhost:3000/

3. Not compiled

4. compiled

[manniL]

I don't think that it's the expected behavior. ~/assets and ~assets should both work IMO

[clarkdo]

Please use ~/assets in url() resources, because ~ is a special indicator in css-loader, ~assets will be resolved in modules.
CSS Loader Doc: https://github.com/webpack-contrib/css-loader#url
Pull Request fixed aliases starting with /: webpack-contrib/css-loader#597
Nuxt Related Issue: #1435
Webpack Comment on ~: webpack/webpack#2395 (comment)
Lib CSS Loader is using for url loading: https://github.com/webpack/loader-utils#module-urls

[ghost]

This bug-report has been cancelled by @manniL.

[jyqry]

@clarkdo
it has the same issue when I'm only using ~/assets in url() resources.

I expected ~/assets in url() resources are compiled.
but nuxt-edge latest build do not compile ~/assets in url() (tested in 2.0.0-25571241.61c0976 version)
I think this is a bug because this happens with starter template (I just added a single svg file)

[clarkdo]

Could you please provide a repository?

[jyqry]

here it is :)
https://github.com/jyqry/nuxt-loader-test

please check /pages/index.vue

[clarkdo]

My current time is midnight already, I’ll look into it tomorrow, sorry for the inconvenience.

[jyqry]

okay good night💤

[clarkdo]

The issue is related to webpack-contrib/css-loader#750, css-loader removed the alias option and replaced with loader-util which will tread ~/ as absolute path.
So please use ~assets instead of ~/assets for now. Or add css-loader@0.28.11 manually.

@Atinux Do we need to downgrade the css-loader or change doc or release note as a reminding ?

[clarkdo]

Downgrade css-loader for now, 6bfa68d

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.