Angular 應用程序無法識別 StencilJs 自定義 Web 組件的全局樣式

Question

我已經使用 Stencil 創建了一個自定義的 Web 組件。

我在/src/global/global.scss設置了一堆 CSS 變量：

例如：

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

我的 stencil.config.ts 看起來像這樣：

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

如果我將組件發布到 NPM，然后將其安裝到我的 Angular 應用程序中，它就可以工作，只是它無法識別全局 CSS 文件中定義的任何變量。

在我的 Angular 項目中 - 文件在這里，並且包含變量：

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

只是我的 Angular 項目似乎不知道該文件。

我在別處讀到我應該在我的 Angular 項目的 index.html 文件中包含這一行：

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

但是，我已經嘗試過，當我運行ng serve ，瀏覽器找不到：

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

我猜我缺少一些配置設置，它告訴 Angular 將 CSS 文件從/node_modules/my-component/dist/my-component/my-component.css復制到dist/my-component/my-component.css ，但我不知道如何或在哪里做到這一點。

Answer 1

在 angular.json 中：

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