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

Posted 2023-03-07

【中文标题】在 angular-cli 库项目中使用别名设置 scss 路径

【英文标题】：Set scss path using alias in angular-cli library project

【发布时间】：2019-03-03 00:07:21

【问题描述】：

我正在使用 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，我可以这样做。每个安装我的库的人都可以通过

访问我的 scss

@import '~library-name/scss';

但我的测试应用不能。

问题

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

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

【参考方案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 部分，你需要更改 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 的答案

【讨论】：

问题不在于从./library/projects/my-library 提供scss。问题是@import '~my-library/scss' 来自我在./library/src/app/ 中的代码（我的测试应用程序）

但是很高兴知道我是否想捆绑我的 scss，而不是将其作为单个文件提供。谢谢你。

@ØysteinAmundsen 哦，我明白了，抱歉误会，现在有点难。我将更新我在互联网上所知道和发现的内容，希望对您有所帮助

哇！您在更新中提出的解决方案似乎相当复杂。没有更简单的方法吗？

在现代，您不必为了自定义 Angular 构建过程和 Webpack 配置而弹出。例如，您可以使用它来添加额外的 webpack 配置：npmjs.com/package/@angular-builders/custom-webpack