Angular ssr css variables name change issue

Viewed 200

Suddenly some of my css variable names on SSR build on server are being changed to something else and not working. For example i have

.color-black-75 {
    color: var(--black-75-color);
}

in my styles.css but when i build project on server in browser it turns to:

enter image description here

i checked out to older commits from 1 month and 2 month ago but this is still happening.

everything works fine when i build project on local ( with docker ) but on server this is preventing some css classes from working.

1 Answers

First find and replace corrupted classes in *.css with correct classes in dist folder so the project will work fine on server until we find the real issue.

Then if project is being built fine on your local then the issue should be about Package.json package versions or your Dockerfile installed application versions so you can copy your local package-lock.json file to server via scp and then push your local docker image and then pull on server so these issues would be fixed.

The real issue in this case was a package version update which you could find with comparing local package-lock.json with server package-lock.json and then removing ^version and ~versions from package.json and use exact version so over time your packages won't be updated and won't cause any issue.

Related