search

syncfusion / ej2-javascript-ui-controls

Syncfusion JavaScript UI controls library offer more than 50+ cross-browser, responsive, and lightweight HTML5 UI controls for building modern web applications.
https://www.syncfusion.com/javascript-ui-controls
Other
401 stars 160 forks source link

CSS styles are not exported from the syncfusion packages #160

Closed davidpanic closed 1 year ago

davidpanic commented 1 year ago

We have just updated our angular application to angular 15 which adds stricter scss rules. This means that we can no longer import syncfusion styles into our application due to the following error and similar ones for other styles:

./src/app/modules/calendar/containers/calendar-container/calendar-container.component.scss?ngResource - Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./styles/material.css is not exported from package /home/david/[redacted]/node_modules/@syncfusion/ej2-angular-schedule (see exports field in /home/david/[redacted]/node_modules/@syncfusion/ej2-angular-schedule/package.json)
davidpanic commented 1 year ago

After some more research, this issue is occurring because webpack 5 now fully respects the exports field and will complain if something is missing.

davidpanic commented 1 year ago

This is a very simple fix, all that is required is to modify your package.json files to include the styles in the exports:

{
  ...
  "exports": {
    ...,
    "./styles/": "./styles/"
  }
}
Balaji-Elumalai commented 1 year ago

@davidpanic - Thank you for contacting us.

We have validated the query. To avoid style compilation issues, map the SCSS styles in the SCSS file path src/styles.scss and add the stylePreprocessorOptions option under apps in the angular.json file.

"styles": [ "src/styles.scss" ],"stylePreprocessorOptions": { "includePaths": [ "node_modules/@syncfusion" ] },

Refer this documentation and sample.

syncsiva commented 1 year ago

This issue has been resolved. Please feel free to reopen if you have any further queries.