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: