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"
        ],

Angular 应用无法识别 StencilJs 自定义 Web 组件的全局样式

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

javascript

css

stencils

web-component

angular