angular style.scss not updated in the browser

In my angular project am mot longer able to add code in style.scss file, when i add a new line of code it's not applied and when i inpect in the browser the added line is missing in the source.
I tried to clear the cash and lunch the app in a different server but is still the same behavior . the code is present in my file but absent in the browser. for the order component style it works without problem ; the issue is just with the global file style or import in the style array of angular.json.
This is my angular.json config

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"position-web": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"maplibre-gl"
],
"outputPath": "dist/position-web",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "9mb",
"maximumError": "9mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "500kb",
"maximumError": "500kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "position-web:build:production"
},
"development": {
"browserTarget": "position-web:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "position-web:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"node_modules/flatpickr/dist/flatpickr.min.js"
]
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
}
},
"cli": {
"analytics": "b15adbd6-08c2-46b2-ac4d-d01914c62569"

}
}

1. Try doing a hard reload (Ctrl + Shift + R on most browsers) to ensure that the browser fetches the latest version of the stylesheet.

2. Try Renaming style.scss: As a test, try renaming the style.scss file to a different name and update the reference in angular.json. Then, add some new styles in the renamed file and see if they are applied.

3. Inspect CSS Overrides: Use your browser's developer tools to inspect the styles applied to specific elements. Check for any CSS rules that might be overriding the styles you defined in style.scss. CSS specificity and order of stylesheet loading can lead to style conflicts.

4. Check for CSS Linting Errors: If you are using CSS linting tools, verify that there are no linting errors or warnings in your styles.scss file that might prevent the styles from being applied.