@import './core/main'; styles in angular not working when deployed

I've created some custom css classes in my src/core/layout.scss like

.flex {
display: flex;
}


and in local env it is working well but when deployed to qa env I dont see that this class is applied. Ive checked network source and when deployed to qa environment I can see .flex inside this file but why it is not working I dont know my scss file lookes like this

@use '@angular/material' as mat;
@include mat.core();

@import './lib/main';
@import './core/main';

@import '@angular/material/prebuilt-themes/indigo-pink.css';
@import url('https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css');


and ./core/main.scss lookes like this

@import './normalize';
@import './layout';
@import './text';


class .flex is located inside layout.scss. For some reason @import './core/main'; this full import not working when deployed here is my angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-project": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": {
"base": "dist",
"browser": ""
},
"allowedCommonJsDependencies": [
"highcharts/highcharts-more",
"highcharts/highstock",
"highcharts/modules/data",
"highcharts/modules/exporting",
"highcharts/modules/windbarb"
],
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets", "src/web.config"],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["src/styles/lib", "src/styles/core/env", "src/styles/core"]
},
"scripts": []
},
"configurations": {
"qa": {
"outputHashing": "all",
"optimization": true,
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
]
},


here is my folder scructure picture


Continue reading...