Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

i created a new component and where i am using css and i want to import it.


hello i created a timeline component and another file inside assets name _timeline.scss but when i run the code timeline component not showing any styles, so what i have to do.


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 (3)


Hi,

Sorry for the late reply.

The _timeline.scss is imported globally and you should be able to use timeline styles on any page.

Please make sure that you are using timeline classes correctly, you can find a markup example in demo1/src/_metronic/partials/layout/activity-drawer/ActivityDrawer.tsx

Regards,
Lauris Stepanovs,
Keenthemes Support Team



can you explain little bit more, i am not understand, is there i have to import _timeline.scss file, and which place i have to create _timeline.scss, and is i have to import _timeline.scss files inside my component.



Hi,

You do not need to import the timeline style file separately, it is already imported in assets/sass/core/components/components.scss which is imported in assets/sass/style.scss.

To use timeline styles you can just import the main style.scss globally as shown below:


import "./_metronic/assets/sass/style.scss"


Please let us know if you have any further questions or anything else.

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  :(