Question

我正在使用angular-cli创建一个库项目。按照angular docs的指示，我最终得到一个./root/src/app文件夹，可以在其中放置一个测试应用程序来演示我的库的功能，而另一个./root/projects/library-name文件夹中包含我的库的功能库。

现在，如果我在./root/src/app中要导入模块/组件/类等，则angular-cli allready已使用键/值路径配置为我设置了tsconfig.json。

{
  "compilerOptions": {
    "paths": {
      "my-library/*": [
        "dist/my-library/*"
      ]
    }
  }
}

对于我们的./root/src/app，所有目的都将模仿我们的库作为node_module进行安装。

因此，即使该库是基于./root/dist/library-name构建的，以下内容也可以在我的测试应用程序中很好地发挥作用：

import { MyLibraryModule } from 'library-name';

问题

SCSS与tsconfig.json中描述的规则不同。如果我的库中包含一些我希望对我的lib用户开放的scss，我可以做到。安装我的库的每个人都可以通过

与我联系

@import '~library-name/scss';

但是我的测试应用程序不能。

问题

如何在angular.json中配置我的scss预处理程序配置，使其模仿我的tsconfig.json进行的angular-cli操作（对于scss）？换一种说法;如何配置angular-cli为我的库构建输出设置目录别名？

编辑请注意，库发布后，我的scss就可以访问了。当它被其他应用程序使用时没问题。我的问题是到达./root/src/app测试应用程序中已发布的scss。

Answer 1

我自己的项目也遇到了同样的问题。我想在我的图书馆旁边导出一些scss文件，例如角度材质的主题文件夹。我发现使用scss-bundle库是一个很好的解决方案，原因显然是没有使用角度cli的方法。

使用scss-bundle非常简单。您需要一个配置文件，例如：

{
    "entry": "src/lib/themes/_core.scss",
    "dest": "dist/themes/_theme.scss"
}

并在每次构建lib时运行以下命令：scss-bundle -c ./scss-bundle.config.json

如果您有不同的需求，这里是github repo

更新：更改sass loader的配置，以便您可以在应用程序项目内更轻松地导入scss文件

如果要像从node_modules一样导入scss局部，则需要更改webpack和sass-loader配置。默认情况下，在角度cli中，WEbpack配置是隐藏的，具体取决于您使用的cli版本，您必须使用更改方式。

1.x 您需要使用ng eject来“弹出” Webpack配置文件。为此Official docs

6.x 在cli v6 ng eject被暂时禁用的情况下，但是仍然有一种解决方法，您可以找到针对它的写得很好的指南here

所有这些之后，您需要配置sass-loader才能将lib项目视为可以找到here答案的根路径