如何在我的 NX monorepo 中的库之间共享 SASS 样式？答案

【问题标题】：How to share SASS styles between libs inside my NX monorepo?如何在我的 NX monorepo 中的库之间共享 SASS 样式？
【发布时间】：2022-10-24 15:05:14
【问题描述】：

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

我该如何解决这个问题？

【问题讨论】：

标签： monorepo nrwl-nx nomachine-nx

【解决方案1】：

如在this blogpost 中找到的。

为样式创建一个库

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,
                ...

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

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

@include list_layout;

即使是基本样式，如 font-family 也是可导入的。

在项目的 style.scss 中成为全局样式（对于这种情况，模块包含全局样式）。

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

@import 'module';

【讨论】：