如何使用npm处理Sass项目中的链式依赖项？

Question

我有两个Sass项目，我正在研究。我们称之为ProjectBase和ProjectExtended。 ProjectExtended依赖于ProjectBase，ProjectBase依赖于第三方节点模块，即Bootstrap。

ProjectBase应该是独立的，但在用作依赖项时也可以工作。

ProjectBase包含了它的Sass文件：

@import '../node_modules/bootstrap/scss/bootstrap';

ProjectExtended然后包括：

@import '../node_modules/ProjectBase/scss/ProjectBase';

ProjectBase可以在运行npm install后无问题地构建它，因为包含的文件位于node_modules下的该路径中。

ProjectExtended中出现问题，因为现在在运行npm install之后，从ProjectBase的角度来看，Bootstrap源不再位于相同的相对位置：

-node_modules/ |--bootstrap |--ProjectBase

正如你在这种情况下看到的那样，Bootstrap突然变成了一个兄弟而不是像这样的依赖：

-node_modules/ |--bootstrap |--ProjectBase |--node_modules |--bootstrap

作为一种解决方法，我手动进入node_modules/ProjectBase，然后在那里运行npm install，这会在该文件夹下再次安装这些依赖项。

有没有更好的方法来解决这个问题？

Answer 1

通过向node-sass提供custom importer可以解决此问题。我有simple implementation这样的导入程序，您可以尝试使用它，它将允许您配置所有必要的路径和规则来解析.scss文件中的导入。

在您的情况下，如果我正确理解您的目录结构，配置可能看起来像{roots: ['node_modules','../node_modules']}。