خطا: شیوه نامه برای وارد کردن پیدا نمی شود. 75 @import '@angular/material/theming';
من نسخه انگولار را گام به گام از 10 به 18 ارتقا دادم.`
ما در حین کار با Angular Material در پروژه Angular 18 با مشکلی روبرو هستیم. پیام خطای خاص این است:
./src/styles.scss – خطا: ساخت ماژول ناموفق بود (از ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
صفحه سبک برای وارد کردن پیدا نشد.
╷
73 │ @import '@angular/material/theming';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
شیوه نامه ریشه src\styles.scss 73:9
این خطا با وجود بررسی های متعدد و تلاش برای رفع آن همچنان ادامه دارد. در زیر شرح مفصلی از محیط، مراحل انجام شده و مشاهدات ما آورده شده است.
جزئیات محیطی:
Angular CLI: 18.2.12
نود: 18.20.5
مدیر بسته: npm 10.9.2
سیستم عامل: ویندوز 10 (64 بیتی)
بسته های زاویه ای:
@angular/animations: 18.2.13
@angular/common: 18.2.13
@angular/material: 18.2.14
@angular/cdk: 18.2.14
تایپ: 5.5.4
اقدامات انجام شده تاکنون:
تأیید وابستگی ها:
تأیید شد که همه وابستگی‌های مورد نیاز Angular Material نصب شده‌اند.
برای نصب مجدد بسته ها از دستورات زیر استفاده کرد:
npm نصب @angular/material @angular/cdk
npm بازسازی node-sass
npm نصب کنید
بررسی angular.json:
تأیید کرد که angular.json شامل styles.scss است و مسیرهای نادرستی برای مضامین Material ندارد.
"styles": [
"src/styles.scss",
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]
اعتبارسنجی styles.scss:
اطمینان حاصل کرد که واردات زیر وجود دارد و به درستی حل می شود:
`
@import '@angular/material/theming';
@import 'bootstrap/scss/bootstrap';
@import 'ngx-toaster/toster';
هنگام تعریف یک موضوع سفارشی، واردات اضافی و مضامین از پیش ساخته شده غیرضروری حذف شد.
تنظیم تم سفارشی:
یک تم Material سفارشی در styles.scss تعریف کرد:
@include mat-core();
$my-theme-primary: mat-palette($mat-deep-purple);
$my-theme-accent: mat-palette ($mat-blue, A200, A100, A400);
$my-theme-warn: mat-palette($mat-red);
$theme1: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);
@include angular-material-theme($theme1);
`
موضوع انتخاب تم:
هنگام اجرای ng add @angular/material@18، متوجه شدیم که تم های قدیمی تر مانند indigo-pink.css در گزینه های موجود وجود ندارند:
? یک نام تم از پیش ساخته شده یا «سفارشی» برای یک تم سفارشی انتخاب کنید: (از کلیدهای جهت دار استفاده کنید)
لاجوردی/آبی
رز/قرمز
سرخابی/بنفش
فیروزه ای/نارنجی
سفارشی
با این حال، indigo-pink.css در node_modules/@angular/material/prebuilt-themes/ وجود دارد.
اعتبار سنجی ماژول های گره:
وجود @angular/material/theming را در node_modules تأیید کرد.
خروجی فرمان برای تم های از پیش ساخته شده:
دایرکتوری: C:\path\to\node_modules\@angular\material\prebuilt-themes
azure-blue.css
cyan-orange.css
deeppurple-amber.css
indigo-pink.css
Magenta-violet.css
صورتی-آبی.css
بنفش-سبز.css
rose-red.css
کامپایل مجدد:
دستورات زیر را برای پاک کردن کش ها و کامپایل مجدد اجرا کنید:
کش پاک
کش npm پاک کردن –force
از ساخت — پرحرف
از خدمت
ادغام Toastr و Bootstrap:
تایید شده ngx-toastr و Bootstrap SCSS نصب شده اند و به درستی حل می شوند.
سوالات و مشاهدات:
آیا موضوع گمشده مسئله است؟
چرا تم هایی مانند indigo-pink.css در طول راه اندازی ng add @angular/material@18 فهرست نمی شوند، حتی اگر در node_modules وجود داشته باشند؟
آیا حل مسیر علت اصلی است؟
با وجود مسیرهای صحیح در styles.scss و angular.json، چرا @angular/material/theming حل نمی شود؟
آیا تغییراتی در Angular Material 18 وجود دارد؟
آیا رویکرد قالب‌بندی یا تم‌های از پیش ساخته شده در Angular 18 تغییر کرده و باعث این ناسازگاری شده است؟
