Angular doesn't properly bundles stylesheets into the library's output

[Mohamed7Imran]

Angular doesn't properly bundles stylesheets into the library's output

[alan-agius4]

Node module packages should not be imported using relative paths. This rule applies to both JavaScript and CSS files in application and library builders.

Incorrect:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

Correct:

@import '@syncfusion/ej2-base/styles/material.css';

[Mohamed7Imran]

Hi @alan-agius4 ,

Thanks for the update still facing same issues.

[alan-agius4]

Out of curiosity, why not include the CSS in the global stylesheet of the application? It seems like the referenced CSS is intended for global use rather than being tied to a specific component. Importing it directly into a component could significantly increase its size, especially if these stylesheets are also used in other components.

I tried building this locally, but it seems that one of the stylesheets isn't exported correctly:

✘ [ERROR] Could not resolve "@syncfusion/ej2-angular-schedule/styles/material.css"

    <stdin>:9:8:
      9 │ @import '@syncfusion/ej2-angular-schedule/styles/material.css';
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "./styles/material.css" is not exported by package "@syncfusion/ej2-angular-schedule":

    ../../node_modules/@syncfusion/ej2-angular-schedule/package.json:43:13:
      43 │   "exports": {

[Mohamed7Imran]

why not include the CSS in the global stylesheet of the application?

We would like to contain the required styles for the scheduler component in the library itself, as well as the referenced styles is for scheduler dependent styles as it implements and holds other components in it. 

I tried building this locally, but it seems that one of the stylesheets isn't exported correctly:

You can add:

@import '@syncfusion/ej2-schedule/styles/material.css';

instead

@import '@syncfusion/ej2-angular-schedule/styles/material.css';

[alan-agius4]

This approach seems quite inefficient for both build and runtime performance, unless these stylesheets aren't used by any other components in the application. Otherwise, it could lead to redundant stylesheet processing and duplicate styles in the bundles.

For context, the ScheduleComponent alone is surprisingly 4.1MB in size 😲!

The styles appear to be applied correctly:

However, given the complexity of the component's styles, it’s hard to determine which styles might not be applied. To address this, identify and focus the bare minimum styles required to show case the problem, create a minimal reproduction to investigate further. Then you can push this repository to github and link it here.