Vue-cli: `@` shortcut not working in css files

[katerlouis]

Version

3.0.0-rc.12

Node and OS info

npm 6.3.0 / node 10.7.0

Steps to reproduce

folder structure:

    assets
         arrow-right.svg

    styles
        main.less

    App.vue

What is expected?

No error

What is actually happening?

Failed to compile.

./src/App.vue?vue&type=style&index=0&lang=less& (./node_modules/css-loader??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./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=less&) Module not found: Error: Can't resolve './styles/@/assets/fonts/TeleGroteskNext-Bold.ttf' in '/Users/reneeschke/projects/myproject/src'

---

// main.less located in /src/styles
.foo {
    background-image: url(../assets/arrow-right.svg); // working
}

.bar {
    background-image: url(@/assets/arrow-right.svg); // NOT working
}

whereas @ works in a vue-component (App.vue or any other component, located no matter where)

<img src="@/assets/arrow-right.svg" />

[yyx990803]

CSS urls need to be prefixed with ~ to be considered a module request.

[katerlouis]

Wow, that was a quick reply– Thank you.
It works great, I didn't know about that– is this somewhere in the docs? If not, I recommend adding this :)

[sirlancelot]

It's in css-loader's documentation: https://github.com/webpack-contrib/css-loader#url

Couldn't hurt to have an example in vue-cli's docs though...