Nx 작업 공간 내 앱 간 스타일 공유

현재 작업에서 우리는 Nx 작업 공간으로 변경하기로 결정했으며 이를 통해 고유한 디자인 시스템을 만들기로 결정했습니다.

그러나 하나 이상의 응용 프로그램에서 동일한 스타일을 유지하고 싶지 않았습니다.

스타일 라이브러리 만들기

내 경우에 가장 좋은 해결책은 스타일에 대해 ui라는 lib를 만드는 것입니다.

nx generate @nrwl/angular:library ui

그런 다음 sass 파일을 라이브러리로 옮겼습니다.


이제 문제는 모든 scss 파일의 @import입니다.
올바른 파일을 인식하게 하려면 어떻게 해야 합니까?
모든 프로젝트의 angular.json에는 경로가 포함되어야 합니다.

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

이제 믹스인이 여전히 프로젝트의 일부인 것처럼 프로젝트의 scss 파일에서 믹스인을 가져올 수 있습니다.

@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';

결론

이것은 문제가 될 수 있는 문제를 쉽게 해결하고 어떻게든 해결하기가 두려웠습니다. 즉, 전역 scss 파일을 응용 프로그램 간에 공유하고 단 하나의 진실 소스(라이브러리)로 쉽게 유지 관리할 수 있습니다.

이 작업을 다르게 수행할 수 있는 방법에 대한 제안이 있으면 아이디어를 공유하십시오.