从 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 and/or 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.

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

Resolving @import .css in SCSS from node modules in Nuxt.js vs PhpStorm

webpack

sass

phpstorm

nuxt.js

node-modules