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

Question

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

现在，如果我在我的 ./root/src/app 中想要导入模块/组件/类等，angular-cli 已经为我设置了 tsconfig.json，有一个 key /值路径配置。

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

这将用于所有关于我们的 ./root/src/app 的目的，模拟我们的库作为 node_module 安装。

因此，即使库构建到 ./root/dist/library-name，以下内容在我的测试应用程序中也能很好地工作:

import { MyLibraryModule } from 'library-name';

问题

SCSS 不符合 tsconfig.json 中描述的相同规则。如果我的库包含一些我希望我的库的使用者可以使用的 scss，我可以这样做。每个安装我的库的人都可以通过

访问我的 scss

@import '~library-name/scss';

但我的测试应用不能。

问题

我如何在 angular.json 中配置我的 scss 预处理器配置，使其模仿 angular-cli 对我的 tsconfig.json 所做的事情，但是对于CSS？换句话说;如何配置 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 repo

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

如果你想像从 node_modules 那样导入 scss partials，你需要更改 webpack 和 sass-loader 配置。 WEbpack 配置默认隐藏在 angular cli 中，具体取决于您必须更改它的 cli 版本。

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

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

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