Global styles for StencilJs custom web component not recognized in Angular app

I've used Stencil to create a custom web component.

I've set a bunch of CSS variables in /src/global/global.scss:

E.g.:

:root {
  --font-family: 'Roboto Condensed';
  --font-size: 1.75rem;
  ... etc ...
}

My stencil.config.ts looks like this:

export const config: Config = {
  namespace: 'my-component',
  globalStyle: 'src/global/global.scss',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    }
  ],
};

If I publish the component to NPM, then install it into my Angular app, it works, except that it doesn't recognize any of the variables defined in the global CSS file.

In my Angular project - the file is here, and does contain the variables:

/node_modules/my-component/dist/my-component/my-component.css

It's just that my Angular project doesn't seem to be aware of that file.

I've read elsewhere that I should include this line in the index.html file of my Angular project:

<link rel="stylesheet" href="/dist/my-component/my-component.css">

However, I've tried that, by when I run ng serve, the browser doesn't find:

http://localhost:4200/dist/my-component/my-component.css

I'm guessing that I'm missing some configuration setting that tells Angular to copy the CSS file from /node_modules/my-component/dist/my-component/my-component.css to dist/my-component/my-component.css, but I don't know how or where to do that.

in angular.json:

       "styles": [
          "./node_modules/my-component/dist/my-component/my-component.css",
          "src/styles.scss"
        ],