Question

我无法使全局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。

Answer 1

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

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

Answer 2

我自己使用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>

Answer 3

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

Answer 4

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

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

Refer image

Stenciljs CSS全局变量

4 个答案: