Stenciljs CSS 全局变量答案

【问题标题】：Stenciljs CSS global variablesStenciljs CSS 全局变量
【发布时间】：2018-08-15 16:24:38
【问题描述】：

我无法让全局 css 变量按照离子模板 docs 中的描述工作。

我在 'src/global/' 中创建了一个 'variables.css' 文件，然后将 "globalStyle: 'src/global/variables.css'" 放入 "stencil.config.ts" 文件中。

然后我在 variables.css 中创建了一组 css 变量，并尝试在我的组件的 css 文件中使用它们；但是，使用默认值，因为它无法加载全局变量。

// stencil.config.ts
import { Config } from '@stencil/core';

export const config: Config = {
    namespace: 'mycomponent',
    outputTargets:[
        {
            type: 'dist'
        },
        {
            type: 'www',
            serviceWorker: null
        }
    ],
    globalStyle: 'src/global/variables.css'
}


// src/global/variables.css
:root {
    --qa-primary-color: #2169e7;
    --qa-secondary-color: #fcd92b;
    --qa-dark-color: #0000;
    --qa-light-color: #ffff;
    --qa-font-family: Arial, Helvetica, sans-serif;
    --qa-font-size: 12px;
}


// src/components/my-component.css
.main {
    background: var(--qa-dark-color, yellow);
}
.first {
    color: var(--qa-primary-color, pink);
}
.last {
    color: var(--qa-secondary-color, green);
}

请随意查看测试repo。

【问题讨论】：

标签： css css-variables stenciljs stencil-component

【解决方案1】：

如果您使用的是 SASS，那么您可以将其添加到您的 stencil.config.ts 文件中

...   
plugins: [
    sass({
      injectGlobalPaths: ["src/global/variables.scss"]
    })
  ]
...

【讨论】：

【解决方案2】：

我通过将<link rel="stylesheet" href="/build/{YOUR_NAMESPACE}.css"> 添加到src/index.html 来解决此问题。

【讨论】：

这对我有用，而且似乎是正确的做法，因为组件的所有工件都在 /build 目录中
这在发布包并以角度使用后不起作用..任何建议

【解决方案3】：

我自己实现了这个功能，使用copy config 将我的 global/variables.css 从 src/ 目录复制到 www/ 和 dist/。此外，为了测试，我在 index.html 文件中为 global/variables.css 添加了样式表链接标记。如果您遵循此过程，则无需设置 globalStyle 配置。

虽然这并没有解决docs 中描述的过程似乎不正确的事实，但它确实提供了预期的效果。

// stencil.config.ts
import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'mycomponent',
  outputTargets:[
    {
      type: 'dist'
    },
    {
      type: 'www',
      serviceWorker: null
    }
  ],
  copy: [
    { src: 'global' }
  ]
}

// html.index
<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        ...
        <link rel="stylesheet" type="text/css" href="global/variables.css">
    </head>
    <body>
        ...
    </body>
</html>

【讨论】：

这实际上对我有用。但是我们不能将“global/variables.css”嵌入到构建文件中吗？

【解决方案4】：

这个问题是由于阴影 DOM 在使用 @component 装饰器时我们有一个属性 shadow 使它为假。这应该在嵌套组件中遵循。参考 https://stenciljs.com/docs/styling#shadow-dom

@Component({
  tag: 'to-do-card-list',
  styleUrl: 'to-do-card-list.css',
  shadow: false,
})

Refer image

【讨论】：

事实并非如此。如果是这样，我的解决方案就行不通了。请注意何时提出此问题，以及当时 StencilJS 的状态（特别是关于 shadow dom）。