CSS classes return to original styling after deploying to Heroku

[yeehanchung]

Hi,

After I have uploaded my web apps to Heroku. Some of the CSS styles have returned to the original form although everything works perfectly fine on my local machine.

CSS classes that have returned to original form including:

• react-chatbot-kit-chat-inner-container
• react-chatbot-kit-chat-container
• react-chatbot-kit-chat-bot-message etc.

May I know how to retain the CSS styling of elements after deployment?

Edit:

• Specifically, after moving the chatbot to its own component folder. It becomes the same as my deployed web apps, which is good because it allows better debugging for now.

However, how to find out the reason why some CSS is not taking effect? Is there any particular way to modify the CSS styles? Still debugging.

Thank you

[yeehanchung]

The issue still persists after build.

I have checked the import of styling files, and it is in the right order by referring to: https://gist.github.com/FredrikOseberg/87795296efb67fe76fa05fc839d22e25#gistcomment-3479653

Any ideas?

[FredrikOseberg]

@cyeehan Hi there. I need some more information in order to find the issue here. (1) How is your deployment process? (2) Are you building the application with yarn build and deploying the dist folder? (3) Have you tried doing a hard refresh in order to clear cache?

If you have a github repo I could take a look when I have time.

[yeehanchung]

@FredrikOseberg Thanks for the quick response!

This is my academic final year employer project, which is still in progress.

For your convenience. The differences are shown below:

1. Local server:
2. Live server

Live website: http://www.new.sausagekl.com/

As shown in the 2nd picture, the SCSS styles are ignored and proceed with 500px, but I wanted it to be 700px.

(1) Firstly, my Heroku app is connected to my GitHub specific branch. All the build process is done in Heroku automatically without requiring me to build manually.

(2) This answer would be the same as question 1. Also, I use npm for my project.

(3) I have tried using the incognito window, smartphone, and different browsers. Still the same.

Thank you in advance.

@cyeehan Hi there. I need some more information in order to find the issue here. (1) How is your deployment process? (2) Are you building the application with yarn build and deploying the dist folder? (3) Have you tried doing a hard refresh in order to clear cache?

If you have a github repo I could take a look when I have time.

[yeehanchung]

@FredrikOseberg

Hi, I have been testing while focusing on my other school projects, but still couldn't find the solutions.

But I have created a new repo for debugging the chatbot alone, but the results are the same on the Heroku server.

Heroku server: https://what-is-this10213.herokuapp.com/ Repo: https://github.com/cyeehan/chatbot-demo/tree/main/my-app

Thank you so much for your time. Cheers

Edit: You would see the result on the server is different from running it locally.

[FredrikOseberg]

@FredrikOseberg

Hi, I have been testing while focusing on my other school projects, but still couldn't find the solutions.

But I have created a new repo for debugging the chatbot alone, but the results are the same on the Heroku server.

Heroku server: https://what-is-this10213.herokuapp.com/ Repo: https://github.com/cyeehan/chatbot-demo/tree/main/my-app

Thank you so much for your time. Cheers

Edit: You would see the result on the server is different from running it locally.

I think the issue is that I'm using style-loader in react chatbot kit and it injects the styles into your document. If you inspect your document you'll see multiple style tags in the head after your stylesheet declarations. I'm working on ways to get around it. For now, a dirty hack to make it work might be to add !important to the CSS rules you want to take precedence.

[yeehanchung]

@FredrikOseberg Hi, I have been testing while focusing on my other school projects, but still couldn't find the solutions. But I have created a new repo for debugging the chatbot alone, but the results are the same on the Heroku server. Heroku server: https://what-is-this10213.herokuapp.com/ Repo: https://github.com/cyeehan/chatbot-demo/tree/main/my-app Thank you so much for your time. Cheers Edit: You would see the result on the server is different from running it locally.

I think the issue is that I'm using style-loader in react chatbot kit and it injects the styles into your document. If you inspect your document you'll see multiple style tags in the head after your stylesheet declarations. I'm working on ways to get around it. For now, a dirty hack to make it work might be to add !important to the CSS rules you want to take precedence.

Really thankful for your help! My concern is resolved for now.

I will close this issue with much gratitude and appreciation. Thanks again 👍