Mic*_*ess 3 css css-variables stenciljs stencil-component
我无法让全局 css 变量按照 ionic stencil 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);
}
请随意查看 test repo。
小智 6
如果您使用 SASS 那么您可以将其添加到 stencil.config.ts 文件中
...
plugins: [
sass({
injectGlobalPaths: ["src/global/variables.scss"]
})
]
...
我自己使用复制配置将 global/variables.css 从 src/ 目录复制到 www/ 和 dist/ 来实现该功能。此外，为了进行测试，我在 index.html 文件中添加了 global/variables.css 的样式表链接标记。如果遵循此过程，则无需设置 globalStyle 配置。
虽然这并没有解决文档中描述的过程似乎不正确的事实，但它确实提供了所需的效果。
// 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>