Topic: MDB uses the legacy "@import" syntax in Angular 19 instead "@use" syntax
Description:
After upgrading to Angular 19, we're encountering SASS import compatibility issues with MDB Angular UI Kit. The library currently uses the legacy "@import" syntax in its SCSS files, while Angular 19 is pushing towards the modern "@use" syntax.
https://sass-lang.com/documentation/breaking-changes/import/
Current Implementation:
- We have a _functions.scss file that provides access to variables, mixins, and other project resources
- We're forced to use "@import" for MDB mixins (e.g., for accessing "media-breakpoint-up(lg)")
- The "@use" method can only be implemented with libraries that internally use "@use"
Question:
- Are there plans to update MDB Angular UI Kit to support the modern "@use" syntax?
- In the meantime, what is the recommended approach for handling this SASS syntax incompatibility while maintaining access to MDB mixins?
Norbert
- We don't have exact plans for this migration yet. The
@importsyntax is now deprecated but still supported. Our styles are built on top of Bootstrap styles and we need to wait for Bootstrap updates first to see what changes will be needed on our end. - For now we recommend using the
@importsyntax to access our styles/functions/mixins.
You can silence the deprecation warnings in the angular.json configuration:
"architect": {
"build": {
"options": {
"stylePreprocessorOptions": {
"sass": {
"silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
}
}
}
}
},
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 8.0.0
- Device: Desktop
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: Yes