如何在 NX monorepo 内的库之间共享 SASS 样式？

Question

我正在尝试为 Angular 和 React 构建一个组件库。这就是为什么我想对两个库使用相同的样式（sass）。我为我的样式创建了一个单独的文件夹，并将我的主 sass 包含在组件中。但是当我尝试进行测试 npm build 并尝试在 Angular 项目中使用时，我解决了这个问题

我该如何解决这个问题？

Answer 1

正如这篇博文中所发现的。

创建样式库

nx generate @nrwl/angular:library ui

现在的问题是所有 scss 文件中的 @import 。如何让他们识别正确的文件？在每个项目的 angular.json 上，都必须包含路径。

"projects": {
    "ds-project": {
        "projectType": "application",
        ...
        "architect": {
            "build": {
                ...
                "stylePreprocessorOptions": {
                    "includePaths": [ "libs/ui/src/lib/styles" ]
                },
                "extractCss": true,
                ...

现在，您可以将 mixin 导入项目的 scss 文件中，就像它们仍然是项目的一部分一样：

@import "mixins/list_mixin";
@import "variables";

@include list_layout;

即使是基本样式（例如字体系列）也是重要的。

在项目的 style.scss 内部成为全局样式（在本例中，模块包含全局样式）。

// styles.scss
/* You can add global styles to this file, and also import other style files */

@import 'module';