Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Metronic Private chat theme SCSS variables "--bs-info-light" is not defined


I am using metronic private chat theme. i didn't modify anything in that but in "https://preview.keenthemes.com/metronic8/react/demo1/apps/chat/private-chat#"
.text-dark and .bg-light-info are fetch from page-title.scss file. In my project .text-dark css fetch from text.scss and .bg-light-info from background.scss.

I think because of css property fetching from the mismatch files. the variables var(--bs-text-dark) and var(--bs-info-light) are showing as not defined. while inspect the elements both shows same class name-"p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start"


user
Aravindh Prabhu 2 years ago
React
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Lauris Stepanovs Author 2 years ago

Hi Aravindh,

Thank you for reaching out to us.

During development, you are using the original source files directly, and the class names will match the original file names. However, in production builds, CSS files are often minified and concatenated to optimize loading times. This process can lead to different class names in the final CSS file, making it harder to trace back to the original source files.

Does it cause any issues in your version?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(