Referencing CSS file from theme library inside Embedded Widget Paragraph type

Question

I have an article page in Drupal 8 that contains a chart (inserted into the page using Text paragraph). The chart uses CSS classes that I have created inside the global stylesheet. It works, but I don't want these CSS classes to be loaded on every single page on my website.

I'm thinking that I would move the CSS classes into a separate file. Then I would move the HTML code for the chart into an Embedded paragraph and reference the theme library.

I'm new to Drupal 8 theming so I'm not sure how I would go about doing that. Can someone give me the general steps?

I think need to do the following.

1. Move CSS classes to a new file
2. create a library refencing the new CSS file that is not loaded by default
3. Add the CSS file URL to the embedded widget "Javascript Source" field

I'm not sure how to add the library refence to my theme or to make it not load by default.

Answer 1

Your thought process is correct. To implement below script tag is to be referenced inside the embedded widget

Like: Js

<script type="text/javascript" src="/custom.js"></script>

Like : Css

<link href="/custom.css" rel="stylesheet" />

Thanks