1

I created a new angular 15.2 project with material and animations, here the package.json

  {
  "name": "name",
  "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": "^15.2.0",
    "@angular/cdk": "^15.2.6",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/material": "^15.2.6",
    "@angular/material-moment-adapter": "^15.2.7",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@microsoft/signalr": "^7.0.5",
    "bootstrap": "^5.2.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.6",
    "@angular/cli": "~15.2.6",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.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.9.4"
  }
}

Then in the styles.scss I changed the material colors and imported my custom css files as i do in all my angular project:

@use "@angular/material" as mat;
// Plus imports for other components in your app.
@import "assets/css/tokens.css";

@include mat.core();

//Define material palettes and themes
    
@include mat.all-component-themes($my-theme-light);

[data-theme="dark"] {
  @include mat.all-component-colors($my-theme-dark);
}

@import "node_modules/bootstrap/scss/bootstrap";

@import "assets/css/colors.module.css"; // <---- My custom css
@import "assets/css/my.scss"; // <---- My custom scss

The issue is that, without changing any angular default configuration, the css classes (from the colors.module.css are all obfuscated (but in the html they aren't), while importing the my.scss retreive all the classes are in plain text/not obfuscated.

I can't understand why this is happening, It's the first time i see this problem on my projects and I'm not able to find any solution searching on google and here, something changed in the default configuration of the css/sass loader on the last version of angular? How can I restore the classic behaviour?

For example, following classes present in the colors.module.css :

.background {
  background-color: var(--md-sys-color-background) !important;
}
.background-text {
  color: var(--md-sys-color-background);
}

are translated in this way:

Obfuscated classes

Majico
  • 475
  • 1
  • 6
  • 20
  • Also, changing the type of `colors.module.css` from `css` to `scss` resolved the issue, anguar (or the sass loader, idk) It's obfuscating only css files, but i need to undestand or have some documentation reference in order to set the classic behaviour. – Majico Apr 14 '23 at 10:28

0 Answers0