File to import not found or unreadable: ~typeface-lato.

[JounQin]

Version

15.0.0

Reproduction link

https://github.com/JounQin/blog/blob/master/src/views/App.vue#L213

Steps to reproduce

change this line to @import '~typeface-lato'; and run npm run build:vue:client

What is expected?

No error thrown

What is actually happening?

    ERROR in ./src/views/App.vue?vue&type=style&index=0&lang=scss (./node_modules/css-loader??ref--4-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--4-oneOf-1-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-4!./node_modules/sass-resources-loader/lib/loader.js??ref--9-oneOf-1-5!./node_modules/vue-loader/lib??vue-loader-options!./src/views/App.vue?vue&type=style&index=0&lang=scss)
    Module build failed:
    undefined
    ^
          File to import not found or unreadable: ~typeface-lato.
          in /local/GitHub/blog/src/views/App.vue (line 1277, column 1)

---

It is weird because there is no error thrown on development. And I was thinking maybe it was a bug of sass-loader, but when I change the codes like following it will also work:

<style src="typeface-lato"></style>

typeface-lato is a package which main field in package.json is a .css file.

[yiqianglin]

same problem

[LinusBorg]

I think sass-loader skips imports of .css files, so thze next loader (postcss-loader/css-loader) handles them, and I think those don't use the ~ tilde character for node_modules packages.

[JounQin]

OK, I'm using like following now and ~ is still needed for node_modules packages in .css/.scss @import:

<style>
@import '~font-awesome/css/font-awesome.css';
@import '~github-markdown-css';
@import '~typeface-lato';
</style>