Sass @import rules are deprecated and will be removed in Dar


Topic: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

allancmello pro premium asked a week ago

No error

** [WARNING] 1 repetitive deprecation warnings omitted. Run in verbose mode to see all warnings. [plugin angular-sass]

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

null

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:7:8:
  7 │ @import 'mdb-angular-ui-kit/assets/scss/mdb.scss';
    ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:9:8:
  9 │ @import "swiper/scss";
    ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:10:8:
  10 │ @import 'swiper/css/effect-flip';
     ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:11:8:
  11 │ @import 'swiper/scss/navigation';
     ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

▲ [WARNING] Deprecation [plugin angular-sass]

src/styles.scss:12:8:
  12 │ @import 'swiper/scss/pagination';
     ╵         ^

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

The plugin "angular-sass" was triggered by this import

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~**

Watch mode enabled. Watching for file changes... NOTE: Raw file sizes do not reflect development server per-request transformations. 18:13:57 [vite] (ssr) Re-optimizing dependencies because lockfile has changed 18:13:58 [vite] (client) Re-optimizing dependencies because lockfile has changed (x2) Failed to resolve dependency: ./chunks/helpers.dataset.js, present in client 'optimizeDeps.include' ➜ Local: http://localhost:4900/ ➜ press h + enter to show help 18:14:00 [vite] Internal server error: Failed to resolve import "./chunks/helpers.dataset.js" from ".angular/vite-root/mdb-angular-ui-kit-pro-essential/scripts.js". Does the file exist? Plugin: vite:import-analysis File: D:/Dev/Projetos/AI Ollama3 VPS/frontend/.angular/vite-root/mdb-angular-ui-kit-pro-essential/scripts.js:7:2125 5 | * Released under the MIT License 6 | */ 7 | import { r as requestAnimFrame, a as resolve, e as effects, c as color, i as isObject, d as defaults, b as isArray, v as valueOrDefault, u as unlistenArrayEvents, l as listenArrayEvents, f as resolveObjectKey, g as isNumberFinite, h as defined, s as sign, j as createContext, k as isNullOrUndef, _ as _arrayUnique, t as toRadians, m as toPercentage, n as toDimension, T as TAU, o as formatNumber, p as _angleBetween, H as HALF_PI, P as PI, q as _getStartAndCountOfVisiblePoints, w as _scaleRangesChanged, x as isNumber, y as _parseObjectDataRadialScale, z as getRelativePosition, A as _rlookupByKey, B as _lookupByKey, C as _isPointInArea, D as getAngleFromPoint, E as toPadding, F as each, G as getMaximumSize, I as _getParentNode, J as readUsedSize, K as supportsEventListenerOptions, L as throttled, M as _isDomSupported, N as _factorize, O as finiteOrDefault, Q as callback, R as _addGrace, S as _limitValue, U as toDegrees, V as _measureText, W as _int16Range, X as _alignPixel, Y as clipArea, Z as renderText, $ as unclipArea, a0 as toFont, a1 as _toLeftRightCenter, a2 as _alignStartEnd, a3 as overrides, a4 as merge, a5 as _capitalize, a6 as descriptors, a7 as isFunction, a8 as _attachContext, a9 as _createResolver, aa as _descriptors, ab as mergeIf, ac as uid, ad as debounce, ae as retinaScale, af as clearCanvas, ag as setsEqual, ah as getDatasetClipArea, ai as _elementsEqual, aj as _isClickEvent, ak as _isBetween, al as _readValueToProps, am as _updateBezierControlPoints, an as _computeSegments, ao as _boundSegments, ap as _steppedInterpolation, aq as _bezierInterpolation, ar as _pointInLine, as as _steppedLineTo, at as _bezierCurveTo, au as drawPoint, av as addRoundedRectPath, aw as toTRBL, ax as toTRBLCorners, ay as _boundSegment, az as _normalizeAngle, aA as getRtlAdapter, aB as overrideTextDirection, aC as _textX, aD as restoreTextDirection, aE as drawPointLegend, aF as distanceBetweenPoints, aG as noop, aH as _setMinAndMaxByKey, aI as niceNum, aJ as almostWhole, aK as almostEquals, aL as _decimalPlaces, aM as Ticks, aN as log10, aO as _longestText, aP as _filterBetween, aQ as _lookup } from "./chunks/helpers.dataset.js";

**

Angular 19

"dependencies": { "@angular/animations": "^19.2.2", "@angular/cdk": "^19.2.3", "@angular/common": "^19.2.2", "@angular/compiler": "^19.2.2", "@angular/core": "^19.2.2", "@angular/forms": "^19.2.2", "@angular/platform-browser": "^19.2.2", "@angular/platform-browser-dynamic": "^19.2.2", "@angular/router": "^19.2.2", "@fortawesome/fontawesome-free": "^6.0.0", "chart.js": "^3.9.1", "crypto-js": "^4.2.0", "date-fns": "^4.1.0", "dayjs": "^1.11.13", "javascript-time-ago": "^2.5.11", "jwt-decode": "^4.0.0", "md5": "^2.3.0", "mdb-angular-ui-kit": "file:mdb-angular-ui-kit-8.0.0.tgz", "ng2-charts": "^8.0.0", "ngx-pipes": "^3.2.2", "rxjs": "~7.5.0", "swiper": "^8.4.5", "tslib": "^2.1.0", "zone.js": "~0.15.0" },

**


This problem was already discussed here: https://mdbootstrap.com/support/angular/mdb-uses-the-legacy-import-syntax-in-angular-19-instead-use-syntax/

You can find more details and a solution in this thread.


allancmello pro premium commented a week ago

Hi, this solution not work for silencing depracation warnings.

For your solution, we get the error: An unhandled exception occurred: Schema validation failed with the following errors: Data path "/stylePreprocessorOptions" must NOT have additional properties(sass).

Important Considerations: The stylePreprocessorOptions.sass is available only for Angular 19+ when using the application builder (@angular-devkit/build-angular:application). When using stylePreprocessorOptions, ensure the paths are relative to the angular.json file or the project root. For libraries, the stylePreprocessorOptions should be defined in the angular.json of the application that consumes the library or in the library's own build configuration if it has one. Using stylePreprocessorOptions with includePaths can simplify imports, but it's essential to maintain a well-organized file structure for maintainability.

However, if we change the "builder": "@angular-devkit/build-angular:browser-esbuild" to "builder": "@angular-devkit/build-angular:application" we get the error and compilation: An unhandled exception occurred: Schema validation failed with the following errors: Data path "" must have required property 'browser'.

I will wait for the next build of the new MDB version with the sass fix. I will keep my version 7.1.0, the solutions given do not work.

Thanks for your help.


Arkadiusz Idzikowski staff commented a week ago

You could try to compare your angular.json configuration with a configuration from a new Angular (v19) app to make sure you use the correct syntax.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 8.0.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes
Tags