1. Home
  2. Forum
  3. Angular - EJ 2
  4. SCSS compile error with v25

SCSS compile error with v25

When updating to v25 the scss does not compile anymore:

@use "../node_modules/@syncfusion/ej2-base/styles/material3.scss" as sfBase;
@use "../node_modules/@syncfusion/ej2-buttons/styles/material3.scss" as sfButtons;

If I use @import everything works

@import"../node_modules/@syncfusion/ej2-base/styles/material3.scss";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.scss";

But I prefer using@use over @import since @use is more performant


5 Replies 1 reply marked as answer
MI Mohamed Imran Thamin Ansari Syncfusion Team March 21, 2024 12:37 PM UTC

Hi Michael,

Thank you for reaching out to us.

 

We've carefully reviewed your concern regarding the usage of @use versus @import in your SCSS files. We understand your preference for @use due to its performance benefits, but we'd like to provide some insights into the implementation of Syncfusion styling.

 

When using @use in SCSS, Sass expects that all variables, mixins, and functions are explicitly defined before they are used. In our case, since we provide multiple UI component libraries, our stylesheets rely on variables defined in our base style file, where we have all the base definition variables for all our components. Some components depend on other stylesheets based on the component hierarchy.

 

This design ensures that our components have access to consistent styling and functionality. These styles are essential for ensuring the optimal functioning of our components, providing you with comprehensive control over their appearance and behavior.

 

Additionally, we would like to inform you that we've meticulously configured our variables to prevent any potential conflicts or naming issues with our component styles. So we recommend continuing to use @import to ensure smooth compilation and consistent styling across Syncfusion components.

 

If you need any further assistance, kindly reach out to us.


Regards,
Mohamed Imran T


Marked as answer
MM Michael Mairegger March 29, 2024 08:57 AM UTC

Thanks for the clarification. Then I will change back to @import


MI Mohamed Imran Thamin Ansari Syncfusion Team April 1, 2024 04:58 AM UTC

Hi Michael,


Thanks for your understanding and attention to updating the information.

. 
Regards,
Mohamed


CT Christos Typou June 4, 2025 12:41 PM UTC

Hello,

Since @import is officially deprecated as of Dart Sass 1.80.0 and is expected to be removed in Dart Sass 3.0.0, are there or will there be any changes to how we reference CSS files (e.g., @import '../node_modules/@syncfusion/ej2-base/styles/material.css')?


DA Deepika Arumugasamy Syncfusion Team June 10, 2025 03:07 PM UTC

Hi Christos Typou,

We're happy to share that several deprecation warnings have already been addressed in our 2025 Volume 1 Main Release (v29.1.33). However, the specific migration from @import to the newer @use and @forward directives is not yet included in that version.

We have already considered this enhancement request to update SCSS styling by using @use and @forward instead of @import, and it is currently in our development queue. Usually, Syncfusion will plan and implement the feature based on feature rank, customer request count, and volume Wishlist. We will implement and include this feature in any one of our upcoming releases.

 

You can track the status of this feature in the feedback link below:

Feedback: Update SCSS styling to use @use and @forward directives instead of @import.

 

Please let us know if you have any further questions or need additional assistance. We’re always happy to help!

Regards,

Deepika

 



Loader.
Up arrow icon