webpack - 从 Nuxt.js 与 PhpStorm 中的节点模块解析 SCSS 中的 @import .css

Question

假设我想从我的主要 app.scss 中的节点模块导入一些样式表:@import '~bootstrap/scss/bootstrap';这将由 PhpStorm 正确解决，并由 Nuxt.js 构建，一切都很好。
现在如果我想对 a scoped node module 做同样的事情(名称格式为 @scope/module 的节点模块) Nuxt.js 和 PhpStorm 不同:

@import '@fortawesome/fontawesome-svg-core/styles.css';这在 Nuxt.js 中运行良好，构建继续没有问题，但 PhpStorm 强调了整件事说 Cannot resolve directory '@fortawesome'

@import '~@fortawesome/fontawesome-svg-core/styles.css';PhpStorm 可以理解这一点并且可以很好地解决，但是会导致 Nuxt.js 构建失败:

ERROR in ./client/assets/sass/app.scss
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Can't resolve '~@fortawesome/fontawesome-svg-core/styles.css'

所以我的问题是:哪种语法会被认为是正确的，是否可以同时让 PhpStorm 和 Nuxt.js 高兴？
对我来说 ~@似乎更有意义，如 ~解析为我的 node_modules 的路径并且其中的实际文件夹名称以 @ 开头.仅使用 @与非范围节点模块相比，这种模式打破了模式， ~根据 PhpStorm 和 Nuxt.js 都需要前缀。

Answer 1

原来，问题是由 .css 引起的。延期。
这适用于 PhpStorm 和 Nuxt.js:@import '~@fortawesome/fontawesome-svg-core/styles';显然(根据 this answer 和/或 this issue )当 .css扩展名用于 @import声明，sass-loader不会真正导入给定文件，而是将其转换为 @import url('~@fortawesome/fontawesome-svg-core/styles.css')声明，这确实是错误的，如 url()无法解决 ~适本地。
所以毕竟这两条略有不同的 SASS 行之间存在显着差异:

@import '@fortawesome/fontawesome-svg-core/styles.css';这导致 @import url('@fortawesome/fontawesome-svg-core/styles.css') ，这取决于 webpack 在构建过程中稍后解决。或者如果没有被 webpack 解析，它可能会被发送到浏览器，它肯定会失败。

@import '~@fortawesome/fontawesome-svg-core/styles';这由 sass-loader 解决和 node_modules/@fortawesome/fontawesome-svg-core/styles.css被导入到主样式文件中，在构建过程中(或在浏览器中)没有任何问题需要解决。

PS:我也意识到它与给定节点模块的范围无关。这一切都归结为导入 .scss对比 .css .