kendo-themes
kendo-themes copied to clipboard
Getting Warning Usage of '~' in imports is deprecated
Describe the bug I am installing Angular 14.2.2 together with @progress/kendo-theme-material 5.8.1
While installing with npm install
I am getting a lot (more than 100) of similar warnings:
Warning: '/Users/<user-name>/<project-path>/node_modules/@progress/kendo-theme-material/scss/action-buttons/_layout.scss' imports '~@progress/kendo-theme-default/scss/action-buttons/_layout.scss' with a tilde. Usage of '~' in imports is deprecated.
Here is the link to the webpack Sass loader where the deprecation is coming from: https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules
Affected package (please remove the unneeded items)
- theme-material
Affected suites (please remove the unneeded items)
- Kendo UI for Angular
Build system information (please remove the unneeded items)
- OS: [Mac]
- Node version: [16.17.0]
- NPM version: [8.15.0]
Unlike node, sass, as of now, works with local files first and then tries to resolve the path by means of checking in specific folders or use function, both provided trough configuration.
In other words, we use tilde (~
) to denote import from package manager folder, because it's a very obvious prefix and is not a valid path that will fallback to said function.
That's more or less the same thing stated in sass-loader documentation.
But let's get to the question in hand -- can we make the warnings disappear? Sure, but that will require a major version. We can target it for 2023 R1, together with some other planned changes.
In the mean time, in the highly unlikely scenario that said deprecation turns to "not supported", you can simply pass an importer function sass-loader
, which is what happens right now, internally.
Thanks @joneff What is the planned schedule for the 2023.1 release?
Pardon me for the delay. The themes have a slightly offset release cycle so the product themes have time to implement changes.
The themes will be released on January 9th, 2023 and the product release will follow on January 18th, 2023.
However, starting immediately after 2022 R3 SP2, which is November 28th and December 7th, respectively, we can have those changes applied in a dev version. Considering dev versions are automatically released every monday morning, a dev version with the changes could be out as soon as December 12th. Could.
We use fixes
, closes
and resolves
keywords and as soon as we merge the target PR, this issue will be closed and you'll know that the changes will be in the next dev version.
As of Angular 15, the tilde import is deprecated in the angular-devkit
package. This will cause project build to fail when the theme is imported from the source scss
folder:
@import '@progress/kendo-theme-bootstrap/scss/all.scss';
As a temporary workaround, until we fix the import paths, you can import the theme from the flattened file in the dist
folder as follows:
@import '@progress/kendo-theme-bootstrap/dist/all.scss';
Here is a working StackBlitz example with the workaround for the theme import: https://stackblitz.com/edit/angular-kdsrdk-9svntr
The above workaround will still produce warning errors for division in calc, due to the usage of the modern Sass API in angular. These warnings can be ignored for now. However, they can also be silenced through the NG_BUILD_LEGACY_SASS=1 ng build
flag.
@Juveniel indeed, it's a working solution. By the way it's importing whole huge styles set... At least, project compiles and styling applied, thx!
@Juveniel @joneff I am trying to scoped theme css inside a class as per recommendation over here https://www.telerik.com/account/support-center/view-ticket/1588967
However all.scss compile is not working if i import inside class. Am i missing anything here?
Hoping you can view this support ticket. Below are my description.
I am loading application in Hybrid mode which use both AngularJs and Angular. And as my AngularJS use kendo js version and in Angular i am using kendo angular version. So my css are getting conflict each others.
Trying to namespace all theme css class with a custom class. .angular-scoped{ @import '~@progress/kendo-theme-default/dist/all.scss'; }
In Html:
<div class="angular-scoped">
<div class="row">
<button kendoButton [themeColor]="'success'">Inside scope</button>
</div>
</div>
My package.json
{ "name": "app14", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^14.2.0", "@angular/common": "^14.2.0", "@angular/compiler": "^14.2.0", "@angular/core": "^14.2.0", "@angular/forms": "^14.2.0", "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", "@progress/kendo-angular-buttons": "^8.2.2", "bootstrap": "^5.2.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4", "@progress/kendo-angular-common": "^3.0.0", "@progress/kendo-angular-l10n": "^4.0.0", "@progress/kendo-angular-popup": "^5.0.0", "@progress/kendo-licensing": "^1.0.2", "@angular/localize": "^14.2.0", "@progress/kendo-theme-default": "^5.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.10", "@angular/cli": "~14.2.10", "@angular/compiler-cli": "^14.2.0", "@types/jasmine": "~4.0.0", "jasmine-core": "~4.3.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.7.2" } }
Getting compiled error ./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): C:\Users\asit.panda\vm_share\app14\node_modules@progress\kendo-theme-default\dist\all.scss:4761:12: Can't resolve 'null' in 'C:\Users\asit.panda\vm_share\app14\src'
./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): C:\Users\asit.panda\vm_share\app14\node_modules@progress\kendo-theme-default\dist\all.scss:18467:8: Can't resolve 'null' in 'C:\Users\asit.panda\vm_share\app14\src'
./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): C:\Users\asit.panda\vm_share\app14\node_modules@progress\kendo-theme-default\dist\all.scss:31731:12: Can't resolve 'null' in 'C:\Users\asit.panda\vm_share\app14\src'
As a temporary workaround, until we fix the import paths, you can import the theme from the flattened file in the
dist
folder
This isn't working for me and I am getting this error. I have installed the dev version (v15.12.1-dev.0) to no avail.
./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
3 │ @import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@progress/kendo-theme-bootstrap/scss/core/functions/_index.scss 3:9 @import
node_modules/@progress/kendo-theme-bootstrap/scss/core/_index.scss 1:9 @import
node_modules/@progress/kendo-theme-bootstrap/scss/index.scss 1:9 @import
@progress/kendo-theme-bootstrap/scss/all.scss 1:9 @import
_main.scss 3:9 @import
src/styles.scss 2:9 root stylesheet
Am I doing something wrong @Juveniel?
@geo242 I had the same issue with Angular 15 (3869).
Your mistake is, that you aren't importing the 'all.scss' from the dist folder:
@progress/kendo-theme-bootstrap/dist/all.scss