css - Stenciljs CSS 全局变量

Question

我无法让全局 css 变量按照 ionic 模板中的描述工作 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

我通过添加 <link rel="stylesheet" href="/build/{YOUR_NAMESPACE}.css"> 解决了这个问题至 src/index.html .