@ src alias does not work inside css

[franciscolourenco]

Version

3.5.5

Reproduction link

https://github.com/franciscolourenco/vue-cli-repro-css-at-src-import

Environment info

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 8.15.0 - ~/.config/fnm/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: Not Found
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    @posva/vuefire-core:  1.0.3
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.5.1
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.5.1
    @vue/cli-plugin-babel: ^3.5.1 => 3.5.1
    @vue/cli-plugin-e2e-nightwatch: ^3.5.1 => 3.5.1
    @vue/cli-plugin-eslint: ^3.5.1 => 3.5.1
    @vue/cli-plugin-pwa: ^3.5.1 => 3.5.1
    @vue/cli-plugin-unit-jest: ^3.5.1 => 3.5.1
    @vue/cli-service: ^3.5.1 => 3.5.1
    @vue/cli-shared-utils:  3.5.1
    @vue/component-compiler-utils:  2.6.0 (2.5.2)
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    jest-serializer-vue:  2.0.2
    vue: ^2.6.9 => 2.6.9
    vue-cli-plugin-element: ^1.0.1 => 1.0.1
    vue-cli-plugin-tailwind: ^0.4.3 => 0.4.3
    vue-drag-drop: ^1.1.4 => 1.1.4
    vue-eslint-parser:  4.0.3
    vue-hot-reload-api:  2.3.2
    vue-jest:  3.0.4
    vue-line-clamp: ^1.3.2 => 1.3.2
    vue-loader:  15.7.0
    vue-promised: ^1.1.1 => 1.1.1
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.9 => 2.6.9
    vue-template-es2015-compiler:  1.8.2
    vue-textarea-autosize: ^1.0.4 => 1.0.4
    vuefire: ^2.0.0-alpha.20 => 2.0.0-alpha.20
    vuex: ^3.0.1 => 3.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Try to use an image inside css by using the src alias @

   background-image: url('@/assets/logo.png');

What is expected?

It works like imports inside javascript

What is actually happening?

 ERROR  Failed to compile with 1 errors                                                      17:29:10

This relative module was not found:

* ./@/assets/logo.png in ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&

[haoqunjiang]

https://cli.vuejs.org/guide/css.html#referencing-assets

All compiled CSS are processed by css-loader, which parses url() and resolves them as module requests. This means you can refer to assets using relative paths based on the local file structure. Note if you want to reference a file inside an npm dependency or via webpack alias, the path must be prefixed with ~ to avoid ambiguity. See Static Asset Handling for more details.

So this works:

background-image: url('~@/assets/logo.png');

[franciscolourenco]

@sodatea thanks. Maybe it would be worth adding this example to the documentation, because I did read that section, but it was not obvious that ~ would work with @.