sass @import 不适用于以下划线开头的外部文件答案

【问题标题】：sass @import is not working for external files that starts with underscoresass @import 不适用于以下划线开头的外部文件
【发布时间】：2020-04-10 10:54:32
【问题描述】：

错误如下： SassError：找不到或无法读取要导入的文件：@library-x/core/style/main 从 ./styles/app.scss 的第 3 行

./styles/app.scss 的内容

//more imports
@import 'variable'
@import '@library-x/core/style/main' //fails here
//more style definitions

文件夹结构

project root
---node_modules
------ @library-x
--------- core
------------ style
--------------- _main.scss
--- src
--- styles
------ app.scss
------ _variable.scss

如果我将导入语句更改为 @import '@library-x/core/style/_main' sass 会完美编译。在订单方面，“@import 'variable'”按预期工作。

过去几天一直在摸不着头脑，在这里感谢您的帮助。谢谢。

【问题讨论】：

在你的文件夹结构中，core里面的目录命名为styles，而不是style。在您的导入语句中，您引用了一个名为 style 的目录。这是一个错字，还是你的问题的原因？
抱歉，打错了。修好了。
如果将@import '@library-x/core/style/main' 行改为@import '~@library-x/core/style/main，是否有效？

标签： css sass

【解决方案1】：

您的导入路径应该相对于您要导入的文件。因此，在 app.scss 中，您可以仅使用路径 variable 引用 _variable.scss，但对于 _main.scss 文件，您需要使用路径 ../../node_modules/@library-x/core/style/main。

如果您的 webpack 配置为在 node_modules 中查找模块，您可以将“../../node_modules/”部分替换为单个~。所以最终路径看起来像~@library-x/core/style/main。

【讨论】：

感谢您的回答。这确实修复了@library-x/core/style/main 的导入！不幸的是，这个库通过@import "bootstrap/scss/functions" 导入 bootstrap/scss/functions。所以它失败了SassError: File to import is not found or unreadable: bootstrap/scss/functions。我不是@library-x 的所有者，所以不能在那里更改导入语句。知道如何进行吗？
我相信在您提出另一个问题的地方发布另一个问题是有意义的。在我的脑海中，我想说你需要向你的 webpack 添加一些 sass-loader 特定的配置，它定义了默认导入目录的位置。或者，如果您使用的库没有自己的引导程序，在导入应该工作的位置，您应该通知库的创建者他们的导入路径中的错误/缺少的依赖项。