Options includePaths does not work for @nx/angular:ng-packagr-lite ( cannot build - angular monorepo )

montella1507 commented 3 months ago

Current Behavior

We have buildable library in monorepo with this configuration inside project.json

....
"sourceRoot": "libs/config-form/widgets/src",
"build": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "libs/core/src/lib/styles/tsm-theme"
        ]
      },
      "executor": "@nx/angular:ng-packagr-lite",
...

and this SCSS code:

// libs/config-form/widgets/src/lib/framework-library/select/dtl-select-editor.component.scss
:host ::ng-deep {
  @import  "vendor/config-form/widgets/src/lib/_common.scss";
}

Referenced _common.scss has path: libs/core/src/lib/styles/tsm-theme/vendor/config-form/widgets/src/lib/_common.scss

But we got error:

 >  NX   Can't find stylesheet to import.

     ╷
   2 │   @import  "vendor/config-form/widgets/src/lib/_common.scss";

We have tried everything... Both in import:

_common @use

and in includePaths:

absolute path
relative path from workspace root
relative path from sourceRoot "libs/config-form/widgets/src",

Nothing works.

However... we are able to build dtl-select-editor.component.scss manually via commnad-line SASS:

sass /Users/****/WebstormProjects/tsm/libs/config-form/widgets/src/lib/framework-library/select/dtl-select-editor.component.scss --load-path="/Users/****/WebstormProjects/tsm/libs/core/src/lib/styles/tsm-theme"

Is it includePaths correctly send to SASS inside NX executor?

We are not 100% sure, but we think it worked in NX16.

"serve" works as well.

Little bit strange is, that it works for CSS files (it can resolve css file) but not SCSS one.

Expected Behavior

IncludePath should have been sent to SASS correctly.

GitHub Repo

No response

Steps to Reproduce

Reference SCSS file from one library in another one via import and includePaths

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 20.9.0
   OS     : darwin-arm64
   npm    : 10.1.0

   nx                 : 17.2.3
   @nx/js             : 17.2.3
   @nx/jest           : 17.2.3
   @nx/linter         : 17.2.3
   @nx/eslint         : 17.2.3
   @nx/workspace      : 17.2.3
   @nx/angular        : 17.2.3
   @nx/cypress        : 17.2.3
   @nx/devkit         : 17.2.3
   @nx/eslint-plugin  : 17.2.3
   @nrwl/tao          : 17.2.3
   @nx/web            : 17.2.3
   @nx/webpack        : 17.2.3
   typescript         : 5.3.3
   ---------------------------------------
   Community plugins:
   @compodoc/compodoc   : 1.1.23
   @ngneat/transloco    : 4.3.0
   @ngrx/data           : 17.1.1
   @ngrx/effects        : 17.1.1
   @ngrx/entity         : 17.1.1
   @ngrx/router-store   : 17.1.1
   @ngrx/schematics     : 17.0.1
   @ngrx/store          : 17.1.1
   @ngrx/store-devtools : 17.1.1
   @nrwl/builders       : 7.8.7
   @rx-angular/cdk      : 17.0.1
   angular-calendar     : 0.31.0

Failure Logs

> nx run config-form-widgets:build:production

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@tsm/config-form/widgets'
------------------------------------------------------------------------------

 >  NX   Can't find stylesheet to import.

     ╷
   2 │   @import  "vendor/config-form/widgets/src/lib/_common.scss";
     │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
     libs/config-form/widgets/src/lib/framework-library/select/dtl-select-editor.component.scss 2:12  root stylesheet
   Pass --verbose to see the stacktrace.

Package Manager Version

No response

Operating System

[X] macOS
[ ] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

No response

leosvelperez commented 3 months ago

Thanks for reporting this!

The @nx/angular:ng-packagr-lite doesn't support a stylePreprocessorOptions option. Please note that the configuration snippet shared in the description is invalid:

"build": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "libs/core/src/lib/styles/tsm-theme"
        ]
      },
      "executor": "@nx/angular:ng-packagr-lite",

The stylePreprocessorOptions is specified as a top-level option of a target, which is not correct. As mentioned, it's also incorrect to provide it to the options of the @nx/angular:ng-packagr-lite executor.

The correct way to set that option is in the ng-package.json file: https://github.com/ng-packagr/ng-packagr/blob/main/docs/style-include-paths.md.

montella1507 commented 3 months ago

@leosvelperez it worked. Thank you very much and have a nice day

github-actions[bot] commented 2 months ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx