时间戳

首页 > 解决方案 > 在 angular-cli 库项目中使用别名设置 scss 路径

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

问题描述

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

现在，如果我./root/src/app想导入模块/组件/类等，angular-cli 已经为我设置了我的 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 中描述的相同规则。如果我的库包含一些我希望为我的库的消费者提供的 scss，我可以这样做。每个安装我的图书馆的人都可以通过

@import '~library-name/scss';

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

问题

如何配置我的 scss 预处理器配置angular.json，使其模仿 angular-cli 对 my 所做的操作tsconfig.json，但对于 scss？换句话说; 如何配置 angular-cli 为我的库构建输出设置目录别名？

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

标签： angulartypescriptsass

解决方案

我自己的项目也有同样的问题。我想在我的库旁边导出一些 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 部分，你需要更改 webpack 和 sass-loader 配置。Webpack 配置默认隐藏在 Angular cli 中，具体取决于您的 cli 版本，您必须更改它。

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

6.x在 cli v6ng eject中暂时禁用，但仍有办法解决此问题，您可以在此处找到编写良好的指南

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

推荐阅读