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

问题描述

让我们说我想从我的主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都需要~前缀。

解决方法

结果是，问题是由.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。