Style override not working

[codehoover]

Hi I attempt to override the styling of the use-chat example the same way you would in bootstrap

My chat_override.scss file looks like

@import "../node_modules/@chatscope/chat-ui-kit-styles/themes/default/variables";

$color-text:blue; $color-primary: purple;

and my main.scss (that I made outside of node_modules) looks like

@charset "utf-8"; @import "./variables.scss"; @import "../node_modules/@chatscope/chat-ui-kit-styles/themes/default/main.scss";

I then import it into the Chat.tsx file as

import "../main.scss";

Is there any documentation on how to do this? Where am I going wrong it seems as thought it should be simple but maybe I am missing something

[supersnager]

@codehoover Thank you for your question.

I think you forgot to import your chat_override.scss.
Please compare your code with this #5 (comment)

[codehoover]

Hi thanks for your quick response! I have now imported it into my main.scss file however no changes happen still!

here is a link to the repo with my code you can find my two files under "styles" https://github.com/codehoover/chatscope_styling

main.scss
@charset "utf-8";
@import "./chat_override.scss";
@import "../../node_modules/@chatscope/chat-ui-kit-styles/themes/default/main.scss";

Am I importing it into the correct file (Chat.tsx)?