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

j91ykkif 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(182)

假设我想从我的主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，非作用域节点模块需要~前缀。

webpack

来源：https://stackoverflow.com/questions/63503743/resolving-import-css-in-scss-from-node-modules-in-nuxt-js-vs-phpstorm

2条答案

按热度按时间

kyxcudwk1#

事实证明，该问题是由.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被导入到主样式文件中，不会留下任何内容供以后在构建过程中（或在浏览器中）解决。
另外，我也意识到这与给定的节点模块是否被限定作用域无关。这一切都归结为导入.scss和.css。

赞(0）回复(0）举报 2022-11-13

5gfr0r5j2#