CSS variables become undefined when used on server | Angular Community | Page 1

glad wraith Dec 5, 2022, 6:22 PM

#

I'm going crazy over this, when I type

ng serve --configuration production ``` 
everything gets displayed as expected. But when I try to put the dist code, on an apache server or even using `http-server` in the directory, it gives me thing instead. I can't see any visible problem with the code! and this is the `angular.json` build options: 
```json
  "preserveSymlinks": true,
            "inlineStyleLanguage": "scss",
            "outputPath": "dist",
            "baseHref": "/MPhone/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": ["src/assets", "src/favicon.ico", "src/favicon.png"],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.css",
              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
              "src/app/@theme/styles/styles.scss"
            ],
            "scripts": ["node_modules/pace-js/pace.min.js"],
            "allowedCommonJsDependencies": [
              "angular2-chartjs",
              "echarts",
              "lodash",
              "zrender/lib/svg/svg",
              "zrender/lib/vml/vml"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": true,
            "sourceMap": false,
            "optimization": true,
            "namedChunks": true

cyan vault Dec 5, 2022, 6:31 PM

#

I don't see a problem. where is the

:root {
  --text-basic-color: #000;
}

and the like? What is going wrong? what did you expect to happen?

glad wraith Dec 5, 2022, 6:39 PM

#

cyan vault I don't see a problem. where is the ```css :root { --text-basic-color: #000; ...

I realize that I should clarified that in the beginning, I'm using a library that puts all the variables on the body tag like so

#

#

the picture was taken in development mode

#

What could cause the issue? Any lead is appreciated because I'm stuck for about two days getting this to work, I tinkered with just about everything

cyan vault Dec 5, 2022, 6:47 PM

#

I still don't know what is wrong, nor what you expect to have happen. Pictures are terrible for communication, it's why we have code now 🙂

glad wraith Dec 5, 2022, 6:49 PM

#

I'm expecting the variables to be defined, on the web page and instead I'm getting a blank page with no css variable defined.
I'm sorry for using pictures but I just didn't know any better way to show it, since there aren't any error.

#

Can you tell me, what do I need to post so you guys can understand my question better?

cyan vault Dec 5, 2022, 6:51 PM

#

Ok, so you have a success case that you think is good. Show me that. Don't show me a picture. Copy and paste some text. the specific and minimal amount of text that shows what you expect/want to see.

glad wraith Dec 5, 2022, 6:52 PM

#

That's going to be difficult but I will try.

#

Just a second

cyan vault Dec 5, 2022, 6:52 PM

#

I have no idea what in the pictures you are showing me that you want me to read. I'm not going to read all of it.

glad wraith Dec 5, 2022, 6:58 PM

#

Thank you very much, it got solved. The class that was put on the body tag when in production is slightly different that the one in development.
Now I need to figure out why.
You just saved me hours, by making me debug my code.

#CSS variables become undefined when used on server