fortawesome import syntax

[BenceSzalai]

Fortawesome is imported with a syntax, that may not work the way intended.

The current syntax @import '@fortawesome/fontawesome-svg-core/styles.css'; causes sass-loader to generate @import url('@fortawesome/fontawesome-svg-core/styles.css') and pass that forward to webpack to deal with. Apparently webpack decides to resolve this @import url(...) and turn it into inline within the final app.*.css but this is still logically wrong as @import url('@fortawesome/fontawesome-svg-core/styles.css') makes no sense really. This syntax also causes unnecessary error being reported in PhpStorm and potentially other IDEs about not being able to correctly resolve the given .css file, since it is not prefixed with ~, so it looks for them in the client/assets/sass folder, instead of node_modules.

The correct syntax would be this: @import '~@fortawesome/fontawesome-svg-core/styles';

By removing the .css extension sass-loader would threat the @fortawesome/fontawesome-svg-core/styles.css file as sass and import it normally instead of translating it to an @import url(...) statement, which is than need to be resolved by webpack (probably other loaders).

It is also more consistent with other imports coming from node_modules. Note how the two preceding lines have the ~, and this one does not, while all tree of them refer to node_modules.

@import '~bootstrap/scss/bootstrap';
@import '~sweetalert2/src/sweetalert2';
@import '@fortawesome/fontawesome-svg-core/styles.css';

I'd recommend changin it to this:

@import '~bootstrap/scss/bootstrap';
@import '~sweetalert2/src/sweetalert2';
@import '~@fortawesome/fontawesome-svg-core/styles';

Also this change allows PhpStorm (and probably other IDEs) to correctly resolve that line, removing the alert and allowing point and click opening of the imported style file.

---

More details about the difference between @import using .css extension and without extension: https://github.com/webpack-contrib/sass-loader/issues/101

My related question and answer with some more explanation of the issue: https://stackoverflow.com/questions/63503743/resolving-import-css-in-scss-from-node-modules-in-nuxt-js-vs-phpstorm

[BenceSzalai]

Let me know if this makes sense with you, so I can submit a PR.

[cretueusebiu]

A PR would be great!

[cretueusebiu]

Fixed in 3.0.0