CODEWITHSUNDEEP
angularangular-materialangular15angular-migration
Ram Anugandula
Ram Anugandula

Reputation: 614

Not able to load custom scss after migrating angular 14 to 15?

I'm currently migrating a project from Angular 14 to 15 and I have updated all packages to 15. While I was able to resolve all the build errors, I'm facing an issue where the UI doesn't seem to be loading properly when running the application.

For instance, when the login page loads, the label components are missing, and the UI looks different from how it appeared in Angular 14. enter image description here

In the Shared/Shared.UserInterface project The node_modules/@angular/material directory contains all the Material libraries. The /src/app/css/angular-material folder contains Custom scss, including: form-field.scss, label.scss,cdk.scss,button.scss,button-toggle.scss,icon.scss,list.scss,badge.scss,card.scss,checkbox.scss,chips.scss etc.

/src/css/angular-material.scss

/* ui2/angular-material */

// Output-less includes
@use '@angular/material' as mat;
@use 'angular-material.declarations' as mat-decl;
@use 'clinicient-ui.declarations' as clinicient-ui;
@use 'clinicient-ui/mixins' as mixins;

@include mat.all-component-themes(mat-decl.$clinicient-material-app-theme);
@include mat.core();

// ZM 6/4/2019: wrapped in body so identical selectors favor our styles over Material's
body {

 @import 'angular-material/form-field';
  @import 'angular-material/label';
  @import 'angular-material/cdk';
  //@import 'angular-material/ripple';
  @import 'angular-material/button';
  @import 'angular-material/button-toggle';
  @import 'angular-material/icon';
  @import 'angular-material/list';
  @import 'angular-material/badge';
  @import 'angular-material/card';
  @import 'angular-material/checkbox';
  @import 'angular-material/chip';
  //@import 'angular-material/option';
  @import 'angular-material/tabs';
  //@import 'angular-material/autocomplete';
  @import 'angular-material/datepicker';
  @import 'angular-material/input';
  @import 'angular-material/select';
  //@import 'angular-material/slider';
  @import 'angular-material/slide-toggle';
  @import 'angular-material/sidenav';
  @import 'angular-material/snack-bar';
  @import 'angular-material/dialog';
  @import 'angular-material/expansion';
  @import 'angular-material/spinner';
  @import 'angular-material/table';
  @import 'angular-material/tooltip';
    }

I attempted to replace @import with @use, The error I am encountering, This at-rule is not allowed here, occurs because the @use rule must be placed at the top level of your SCSS file, and it cannot be nested inside selectors such as body or other blocks.

But In Angular 14 all css wrapped in body tag applied. Now,I believe the custom CSS is not loading properly because I am not able to wrap css in body tag

I'm looking for guidance on how to ensure UI loads correctly with Angular 15.

Updated.

Upvotes: 0

Views: 141

Answers (1)

Grogu
Grogu

Reputation: 512

You're mixing css and scss which is weird.

What is 'angular-material/form-field' supposed to refer to?

Correct behavior is supposed to include material scss mixin.

@use '@angular/material' as mat;

@include mat.core();
// for all components
@include mat.all-component-themes($my-theme);
// or component one by one
@include mat.button-theme($my-theme)

https://v15.material.angular.io/guide/theming#applying-a-theme-to-components

Upvotes: 1

Related Questions