RUDE

Ошибка: Ошибка сборки модуля (из ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js)

Я пытаюсь запустить приложение angular 14, но получаю следующую ошибку при попытке обслуживать его локально. Взгляните на ошибку ниже:

Build at: 2022-06-28T06:24:59.368Z - Hash: 217d45d22093a51f - Time: 5857ms
 ./src/app/app.component.sass?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
  ╷
1 │ .example-icon {
  │               ^
  ╵
  src/app/app.component.sass 1:15  root stylesheet


** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

Вот мои зависимости пакет.json:

  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/cdk": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/fire": "^7.4.0",
    "@angular/forms": "^14.0.0",
    "@angular/material": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "firebase": "^9.8.2",
    "rxjs": "~7.5.0",
    "sass-loader": "^13.0.2",
    "tslib": "^2.3.0",
    "webpack": "^5.73.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/cli": "~14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jest": "^28.1.1",
    "jest": "^28.1.0",
    "jest-preset-angular": "^12.1.0",
    "node-sass": "^7.0.1",
    "typescript": "~4.7.2"
  },

App.component.html

<mat-toolbar color = "primary">
  <mat-toolbar-row>
    <span>Custom Toolbar</span>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Second Line</span>
    <span class = "example-spacer"></span>
    <mat-icon
      class = "example-icon"
      aria-hidden = "false"
      aria-label = "Example user verified icon"
    >
      verified_user
    </mat-icon>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Third Line</span>
    <span class = "example-spacer"></span>
    <mat-icon
      class = "example-icon"
      aria-hidden = "false"
      aria-label = "Example heart icon"
    >
      favorite
    </mat-icon>
    <mat-icon
      class = "example-icon"
      aria-hidden = "false"
      aria-label = "Example delete icon"
    >
      delete
    </mat-icon>
  </mat-toolbar-row>
</mat-toolbar>

App.component.sass

.example-icon {
  padding: 0 14px;
}

.example-spacer {
  flex: 1 1 auto;
}

Моя среда:

Угловой интерфейс командной строки: 14.0.0 Узел: 14.18.0

Я не могу построить угловой проект.


1
585
1

Ответ:

Решено

Основная причина ошибки в том, что вы используете файл SASS вместо SCSS. (Какая разница?) В соответствии с вашим синтаксисом вы хотите использовать SCSS. Поэтому вы должны переименовать файл стиля в app.component.scss и изменить Angular CLI, чтобы использовать синтаксис SCSS с помощью этой команды:

ng config schematics.@schematics/angular:component.styleext scss

Вы также можете взглянуть на этот пост здесь, чтобы изменить параметры Angular CLI на предпочитаемый синтаксис:

Опции Angular CLI SASS

Если вы хотите написать стиль в SASS, вы должны написать это так:

.example-icon 
    padding: 0 14px 
.example-spacer 
    flex: 1 1 auto 

Интересные вопросы для изучения

Когда я открываю терминал, отображается: «Указанная команда («завершение») недействительна. Чтобы просмотреть список доступных параметров, запустите «ng help»Npm run Неверный синтаксис имени файла, имени каталога или метки тома.TypeError: не удается создать «сообщение» свойства для ошибки строки Toastr с использованием AngularОшибка TS2314: для универсального типа «ɵɵComponentDeclaration» требуется 7 аргументов типаКак вручную обновить Angular, чтобы использовать eslint и удалить tslintVuetify — ошибка «Вам может понадобиться дополнительный загрузчик для обработки результатов этих загрузчиков».Ошибка Webpack 5 - Uncaught ReferenceError: требование не определеноЖурнал текущего времени во время просмотра веб-пакетаWebpack - объединение нескольких файлов js в отношении повторно используемых методов и переменных друг от друга.Webpack создает сотни кусков js, снижая производительность для просмотра одной страницы с помощью vue cli