css assets use absolute path got error by required in local folder structure but not remain string

Version

5.0.1

Environment info

  System:
    OS: macOS 11.6.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.5/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.3
  npmGlobalPackages:
    @vue/cli: 5.0.1

Steps to reproduce

1. install latest v5.0.1 @vue/cli in global
2. copy src/assets to public/assets
3. edit App.vue as following

<template>
  <!-- <img alt="Vue logo" src="/assets/logo.png"> -->
  <div id="logo"></div>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#logo {
  width: 200px;
  height: 200px;
  margin: auto;
  background: url('/assets/logo.png') center / cover no-repeat;
}
</style>

1. yarn serve

2. errors in terminal

Compiled with problems:X

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css) 5:36-80

Module not found: Error: Can't resolve '/assets/logo.png' in '/Users/wangj/Desktop/johnny/prac/absolute-path/src'

What is expected?

in v4.5.0 the absolute path in url will remain original string which is same with absolute path in <template></template>

What is actually happening?

absolute path in url got mistakenly required in local env

---

I just found out that this error is due to css-loader’s “url” options by default sets to “true”, just sets the css options “url” to false as following solved this issue, webpack-style-loader-css-loader-url-path-resolution-not-working

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      css: {
        url: false,
      }
    }
  },
}

[ainarend]

Spent hours trying to figure this out, so I agree, this should definitely be looked at again and can be very easily be reproduced on a clean vue-cli 5 project. Everything is exactly as described here:

https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

From docs: - If the URL is an absolute path (e.g. /images/foo.png), it will be preserved as-is. No notes about special behavior on url in css.

In this issue URL is an absolute path (/assets/logo.png), but is not preserved as-is and loaded as a module. In v4 it works as expected.

We used an absolute path, but webpack was still trying to look for the asset inside /src not from /public.

Setting url to false fixed the issue for us as well.

[fjavier-lazaro-bbva]

Bump, exactly! Should be reopened imo, have exactly the same problem

+1