Change in .css files will not take

[MiguelWood-Planet]

I'm trying to customize simple UI elements (colors, etc.) in the css files. Using VSCode to make changes (e.g. ./frontend/src/pages/chat/Chat.module.css) and then pushing to Azure DevOps repo and pipeline build/deploy to Linux Azure Web App), the changes are not showing. (I'm beginning with ,chatContainer background color.) When browsing the updated site and using DevTools, it still shows the original background color.

Any idea on why this is the case?
TYIA

[stbere]

I often have to clear my browser cache to see the latest changes to the webapp frontend

[stbere]

Also, I think you need to edit the */static/assets/index####.css file instead, then merge to your main DevOps repo branch.

[sydneybeckcook]

I have to run start.cmd for frontend changes to take affect

[onshii]

were you able to add more pages to the router and have them render successfully?

[chrismauck]

Some elements are heavily reliant upon fluentui. If you note in the developer tools that your changes are listed, but overridden, you will need to include inline styles on the component that you wish to style. I had luck making changes using styles prop. For example:

`import { TextField } from "@fluentui/react";

const customStyles = {
field: {
backgroundColor: "lightgray", // Background color for the textarea
fontSize: "16px", // Example custom style
color: "black", // Text color
},
};

<TextField
styles={customStyles}
placeholder="Enter text here"
/>;`