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

如何解决Angular应用程序无法识别StencilJs自定义Web组件的全局样式

我已经使用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，但是我不知道该怎么做或在哪里做。 / p>

解决方法

在angular.json中：

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