在angular-cli库项目中使用别名设置scss路径

Question

我正在使用angular-cli创建一个库项目。按照angular文档的说明，我最终得到了一个./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，但是对scss 进行了angular-cli ？换一种说法; 如何配置angular-cli为我的库构建输出设置目录别名？

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

Answer 1

我自己的项目也遇到了同样的问题。我想在我的库旁边导出一些 scss 文件，例如 Angular Material 的主题文件夹。我发现使用scss-bundle库是一个很好的解决方案，因为显然没有办法使用 Angular cli 来做到这一点。

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

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

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

如果您有不同的需求，这里是github 存储库

更新：更改 sass 加载器配置，以便您可以在应用程序项目中更轻松地导入 scss 文件

如果您想像从 node_modules 一样导入 scss 部分，您需要更改 webpack 和 sass-loader 配置。WEbpack 配置默认隐藏在 Angular cli 中，具体取决于您的 cli 版本，您必须采取更改它的方法。

1.x您需要使用ng eject“弹出”webpack 配置文件。官方文档

6.x在 cli v6 中ng eject暂时被禁用，但是仍然有一种方法可以解决这个问题，您可以在这里找到一份写得很好的指南

毕竟，您需要配置sass-loader将您的 lib 项目视为根路径，您可以在此处找到答案