How to access the global styles.scss from static privacy / legal / conditions assets document?

I have a static document e.g. privacy.html which is under:

$PROJECT_ROOT/src/assets/html/privacy.html

I also have my global (common to all components) styles under:

$PROJECT_ROOT/src/styles.scss

I access the static html file from a component like this:

<input type="checkbox">
  <span>
    I agree to the <a target="_blank" href="/assets/html/privacy.html">Privacy Policy</a>.
  </span>
...

Now the privacy.html doesn't get the styles when imported as simply as:

<link rel="stylesheet" href="styles.scss">

How would you cover this use-case? Note that making the privacy.html a component would be a complete overkill.

Solution

You have to compile your scss to css and then link your css.

Using watch Like that

sass --watch styles.scss styles.css

Then you link the css

<link rel="stylesheet" href="styles.css">