Logo

菜单

发布于 2026-01-06 3 阅读
0

在 Nx 工作区内共享应用程序之间的样式

在 Nx 工作区内共享应用程序之间的样式

在我目前的工作中，我们决定改用 Nx 工作空间，并在此基础上创建我们自己的设计系统。

但我不想在多个应用程序中保持相同的样式。

创建一个样式库

对我来说，最佳解决方案是创建一个名为ui 的库来存放样式：



nx generate @nrwl/angular:library ui
Enter fullscreen mode Exit fullscreen mode

然后我将 sass 文件移到了库中：
替代文字

现在的问题是所有 scss 文件中的@import语句。
如何让它们识别正确的文件？需要在每个项目的angular.json 文件
中包含路径。



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

现在你可以像导入项目本身一样，将 mixin 导入到项目的 scss 文件中：



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

@include list_layout;
Enter fullscreen mode Exit fullscreen mode

甚至连字体系列这样的基本样式都是可以导入的。

在项目的style.scss文件中，样式变成了全局样式（在这种情况下，模块包含全局样式）。



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

@import 'module';
Enter fullscreen mode Exit fullscreen mode

替代文字

结论

这轻松解决了一个可能成为问题且我一直不敢着手解决的问题，即在应用程序之间共享全局 scss 文件，并且只需一个数据源（库）即可轻松维护。

如果您有任何改进建议，请分享您的想法。

文章来源：https://dev.to/vitorstick/sharing-styles- Between-apps-inside-nx-workspace-20i5
为 React 项目添加声音
14 个可提交申请的网站（更新列表...