In my angular app i have src/styles.scss

@import "./styles/fonts";
@import "./styles/variables.scss";

and in src/styls/variables.scss

$color-brand-darker: #2d323e;
$color-brand-dark: #0e2c6c;

and i have modules that are being loaded lazily. and this is how i am mentioning styles for a component in a module

@Component({
    selector: 'my-card',
    templateUrl: './my-card.component.html',
    styleUrls: ['./my-card.component.scss'],

and in angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "gothia": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets",
                            "src/web.config",
                            "src/manifest.json"
                        ],
                        "styles": [
                            "src/styles.scss",
                            "node_modules/intro.js/introjs.css",
                            "node_modules/angular-calendar/css/angular-calendar.css"
                        ],
                        "scripts": [
                            "node_modules/intro.js/intro.js"
                        ]
                    },
                    "configurations": {
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "sourceMap": true,
                            "namedChunks": true
                        },
                        "production" : {}

in the options i have mentioned the styles as well but on build using this comamnd

"build": "ng build --configuration production",

showing me the error

./src/app/pages/my-view/components/my-card/my-card.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
   ╷
30 │         border-left: 5px solid $color-brand-darker;
   │                                ^^^^^^^^^^^^^^^^^^^^^^^

am i missing something?

my styles.scss is mentioned in angular.json and making this as global styles!!

so every module shuld have access to access these variables without importing in each component level scss for modules

package json versions

"sass-loader": "13.3.2",
"devDependencies": {
        "@angular-devkit/build-angular": "16.2.14",
        "@angular-devkit/schematics": "^16.0.1",

"@angular-material-components/datetime-picker": "16.0.1",
        "@angular/animations": "16.0.0",
        "@angular/cdk": "16.0.0",
        "@angular/common": "16.0.0",
        "@angular/compiler": "16.0.0",
        "@angular/core": "16.0.0",