Stenciljs CSS全局变量
Stenciljs是一个开源的Web组件库，用于构建可重用的跨框架组件。它基于Web组件标准，并提供了一组强大的工具，用于快速开发高性能、跨平台的应用程序。
CSS全局变量是一种允许开发者在CSS中定义变量，以便在整个应用程序中重复使用的特性。通过使用全局变量，可以提高开发效率和样式的一致性。
Stenciljs提供了对CSS全局变量的原生支持。开发者可以使用--前缀来定义全局变量，然后在整个组件库或应用程序中引用这些变量。在Stenciljs中使用全局变量有以下优势：
- 代码重用：通过使用全局变量，可以在应用程序中定义一次变量，然后在各个组件中重复使用。这样可以减少代码重复，提高开发效率。
- 样式一致性：通过使用全局变量，可以确保整个应用程序中的样式保持一致。如果需要更改某个样式，只需要修改全局变量的值，而不需要逐个修改所有使用该样式的地方。
- 可维护性：使用全局变量可以提高代码的可维护性。如果需要调整样式，只需要修改全局变量的值，而不需要深入每个组件进行修改。
- 可扩展性：通过使用全局变量，可以方便地添加新的样式，而不会对现有的样式产生冲突。这样可以更好地支持应用程序的可扩展性和灵活性。
Stenciljs的CSS全局变量功能可以在各种应用场景中使用，例如：
- 主题定制：通过定义全局变量，可以方便地实现应用程序的主题定制。开发者可以根据不同的主题，调整全局变量的值，从而改变整个应用程序的样式。
- 响应式布局：通过使用全局变量，可以实现响应式布局。开发者可以根据设备的屏幕尺寸，调整全局变量的值，从而适应不同的布局需求。
- 组件样式定制：通过使用全局变量，可以方便地定制组件的样式。开发者可以在全局变量中定义组件的样式相关属性，然后在各个组件中引用这些变量。
腾讯云提供了一系列与云计算相关的产品，如云服务器、云数据库、云存储等。关于Stenciljs和CSS全局变量的详细信息，可以参考腾讯云文档中的相关介绍：
相关·内容
我正在用stenciljs构建一个web组件，我希望能够加载css主题文件，基于名为主题的属性。
@Component({
tag: 'pm-header',
styleUrl: 'pm-header.scss',
shadow: true
})
export class PmHeader {
@Prop() theme: string = 'default';
...
render() {
return (<nav class={this.theme}></nav>)
}
}
浏览 58提问于2018-09-26得票数 7
在我工作的项目中，我们正在将所有的UI组件迁移到StencilJS，以便它们与框架无关。我遇到的问题是，现在我必须将react应用程序中的Modal迁移到StencilJS，然后该StencilJS组件将被React应用程序使用。 当然，情态动词有孩子，因为它们有内容。我知道你可以在StencilJS中使用<slot />呈现孩子，但是如果这些孩子是React组件呢，因为react应用程序是消费模式的应用程序？ 就像这样 <Stencil-js-modal>
<react-content-a/>
<other-react-component/
浏览 15提问于2019-03-08得票数 2
回答已采纳
我正在使用带有stencilJS的工作箱，配置为docs：
问题:当我更改CSS文件中的某些内容时，我的应用程序不会通过新的样式更新，直到我手动注销服务工作人员。
我找到的我的CSS文件生成的sw.js中没有修改号(所以浏览器不会知道这个CSS文件是否改变)
CSS文件名: bootstrap-sandstone.css
是否有任何方法告诉工作盒为给定文件生成修订号？
浏览 2提问于2020-04-07得票数 1
回答已采纳
4回答
我无法让全局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&#
浏览 46提问于2018-08-16得票数 4
回答已采纳
在StencilJS中，这段.tsx代码的编译版本是什么？
render() {
return (
<div>
<div>
test
</div>
</div>
);
}
在React中是：
React.createElement(
"div",
null,
React.createElement(
"div",
null,
"test"
)
);
在StencilJS中有没有"Reac
浏览 0提问于2017-09-23得票数 1
1回答
我想将一个对象数组作为支柱传递给我的StencilJS组件。
import { Watch, Prop} from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: false
})
export class MyComponent {
@Prop({ mutable: true }) events: Array<Object>;
@Watch('events')
浏览 3提问于2021-02-22得票数 0
回答已采纳
我正在尝试将React组件移植到Stenciljs。
对于另一个A.scss文件，组件导入文件有一个@ .scss。该A.scss文件@导入bootstrap-sass/assets/stylesheet/bootstrap/_variables并@导入另一个B.scss。
Stenciljs可以处理吗?或者我需要将所有内容合并到一个文件中？
谢谢
浏览 5提问于2018-03-05得票数 2
我正在尝试应用来自网站的样式，其中包含一个stencilJS组件…但不知道是怎么回事。
import { Component } from '@stencil/core';
@Component({
tag: 'menu-component',
styleUrl: 'menu-component.css',
shadow: true
})
export class MyComponent {
render() {
return (
<div>
<h1>Hello Wo
浏览 0提问于2019-01-18得票数 5
我对stenciljs非常陌生，我的任务是在Stenciljs中创建一个Virtualized Table作为web组件。我遵循的方法是最初创建行div，但希望在收到数据后用data/子节点填充它们。数据可以是API调用。我想知道是否有一种方法可以使用appendChild或类似的东西将jsx动态添加到html节点。如果我能得到任何类型的例子或参考资料，那就太棒了。
浏览 0提问于2020-03-10得票数 0
我从另一个组件调用了一个简单的组件，我要向该组件添加一个边距值。
示例：
儿童部分：
import { Component } from '@stencil/core';
@Component({
tag: 'app-header',
styleUrl: 'app-header.css',
shadow: false
})
export class AppHeader {
render() {
return (
<div class='app-header-component'>
浏览 0提问于2018-08-10得票数 0
1回答
我将一个stenciljs组件嵌入到另一个stenciljs组件中
<parent-component>
<child-component attrz="x">
</child-component>
</parent-component>
仅当父组件接收到具有以编程方式设置的属性'attrz‘的hover事件时，才呈现子组件。我在spec.js或e2e.js中设置了组件，并发出了一个悬停事件，然后等待更改。
例如：
const page = await newE2EPage();
await page.se
浏览 14提问于2019-07-06得票数 0
回答已采纳
1回答
我已经创建了一个简单的网页(模板)组件AuthGuard，不要被混淆与角的AuthGuard。
此组件的目的是检查用户是否已登录。
如果是，则呈现槽html。如果没有，则呈现Signup按钮。。
组件代码如下：
import { Component, Host, h } from '@stencil/core';
import { Build, State } from '@stencil/core';
import { AuthService } from 'auth/auth.service&
浏览 6提问于2020-04-26得票数 0
有没有人设法通过React useRef()和useEffect()钩子在ReactJS中使用在StencilJS中创建的自定义事件？ 我已经看过关于这一点的StencilJS文档，它们只涉及数组和自定义对象。 我是前端开发的新手，所以任何帮助都是朝着正确方向迈出的一步。 提前谢谢。
浏览 28提问于2020-04-22得票数 2
回答已采纳
我们有一个要求，我们加载一个单独的页面作为模式(是的，对吧？) 嵌入的页面使用window.parent.postMessage(messageString, '*')来表示操作已经完成。 我想使用stenciljs的@Listener 我有一个工作模式与另一个页面的iframe，使用老学校的window.addEventListener('message', myMessageHandlingDelegate)。 但是，我真的希望使用@Listener属性/装饰器来处理发布消息的结果。我尝试过@Listener('message')，但是没有
浏览 123提问于2019-01-03得票数 0
回答已采纳
我是StencilJS和JSX的新手。
在我的StencilJS组件中，我有四个支持：
禁用:布尔值
hasIcon:布尔
仅限:布尔
纽扣类型:字符串
在render()函数中，我有：
<Host class={{
'btn': true,
'disabled': this.disabled,
'has-icon': this.hasIcon,
'icon-only': this.iconOnly
}}>
我希望将名为
浏览 5提问于2020-08-05得票数 0
回答已采纳
1回答
我有两个带有Stenciljs组件的私有bitbucket代码库，我想在另一个中使用其中一个的一些组件。我不想把它们上传到npm或任何类似的东西。两个repos都是100%的Stenciljs。 我想知道是否有一种方法可以直接从repo中导入我需要的组件。我对这两个repos都有读写权限。 谢谢你的帮助
浏览 18提问于2021-06-22得票数 0
回答已采纳
1回答
我有一些web组件自定义元素，在本例中是用StencilJS构建的。它们通过npm包安装到我的解决方案中，然后通过脚本标记全局地包含在布局中。
如何让Visual了解这些元素，并在.cshtml视图中为自定义元素+它们的属性提供智能感知？
StencilJS输出一个TypeScript *.d.ts文件，其中包含这些元素的定义，以及描述这些元素的附加JSON文件。可以使用这两种方法之一吗？
似乎可以将Visual代码配置为通过在html.customData设置中添加引用来使用此JSON，Visual是否有类似的内容？
浏览 2提问于2020-06-10得票数 5
回答已采纳
1回答
我试图从HTML中删除被调用的组件标记，以防止外部库中的CSS中断，只显示内部内容。
something.component.html
<div>
Hello World
</div>
another.component.html
<div>
<app-something [config]="somethingConfig"></app-something>
</div>
然后输出：
<div>
<app-something>
<div>
浏览 3提问于2020-09-24得票数 1
1回答
我正在尝试建立一个离线工作的PWA。我正在使用模板PWA模板，它在网上工作得很好，但我似乎不能让它离线工作。 stencil.config.ts import { Config } from '@stencil/core';
// https://stenciljs.com/docs/config
export const config: Config = {
globalScript: 'src/global/app.ts',
globalStyle: 'src/global/app.css',
taskQueue: '
浏览 18提问于2021-08-28得票数 1
我是StencilJS的新手，并且有一个经过编译的自定义组件，我正尝试在.Net核心MVC中使用它。我在我的_Layout中添加JavaScript，如下所示：
<code>A0</code>
然后添加我的自定义组件标记
<code>A1</code>
然而，任何东西都不会渲染到屏幕上。在我的组件渲染中，我有：
<code>A2</code>
我不确定我做错了什么。我让StencilJS将输出配置为默认设置。
浏览 9提问于2020-03-15得票数 0
回答已采纳
1回答
是否有任何方法强制StencilJS导出枚举以供常规JavaScript代码使用？
生成的JavaScript文件仅导出组件类。
export { Calendar, CalendarDailyView, CalendarMonthlyView, CalendarWeeklyView, CalendarYearlyView };
它不导出使用JavaScript定义的其他类或枚举。
假设Enum在TypeScript中定义如下：
export enum ViewType {
daily = 0,
weekly = 1,
monthly = 2,
yearly =
浏览 1提问于2018-04-07得票数 1
目前我正在开发stencilJS，它具有实现卷影dom的功能。我正面临着一个与shadowRoot.It的activeElement相关的问题，在Chrome上工作得很好，但是当我测试我的组件时，activeElement在safari中显示为空。 以下是代码片段 import { Component, Prop, Listen } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
}
浏览 17提问于2019-02-19得票数 1
我正在尝试导入一个css文件，该文件包含node_modules包中的变量。 我试图从stencil.config.ts复制，但它一直将构建转储到我试图指定的位置，并且找不到下一步的信息。 我现在拥有的是这样的东西： type: "www",
dir: 'src/global',
copy: [
{ src: '../node_modules/package/design-tokens/dist/tokens.css', dest: 'themes' }
]
} 现在，我只需要进入node_modules
浏览 14提问于2021-06-27得票数 0
在LitElement中，您可以直接将样式作为内联样式存储在component.ts(或.js)中：
@customElement('main-header')
export class MainHeader extends LitElement {
static styles = css`
p {
background: red;
}
`;
}
或者在单独的文件中，比如style.ts：
\* mainHeaderStyles.ts *\
export default css`
p {
background: red;
浏览 0提问于2019-05-12得票数 2
回答已采纳
我正在从事一个StencilJS项目，在这个项目中，我必须使用MirageJS来生成假API数据。
如何在StencilJS应用程序加载之前调用服务器。在react中，我们可以在文件中调用makeServer()，但是在模板中，我们没有这样的文件。
我们如何叫它来启动海市蜃楼服务器，请有人建议正确的方式。
下面是我的server.ts文件海市蜃楼/服务器。
import { createServer, Model } from 'miragejs';
import { auditFactory } from './factories';
import { pro
浏览 4提问于2021-06-15得票数 0
回答已采纳
1回答
我正在寻找如何在一个新窗口中使用window.open渲染与stenciljs创建的聊天小工具。
当点击小工具图标时，新窗口就会打开，它应该会保留当前在网站上导航时的状态。它还应该具有父级的样式和功能。
我知道，有了React，我就可以利用门户来实现这一点。但是，有谁知道如何使用stenciljs做到这一点呢？或者我应该尝试在Stenciljs中使用React，然后看看它会发生什么？
模拟代码：
<Host class="chat">
{this.state.open ? (
<div class="chat-wrapper">
浏览 0提问于2020-10-15得票数 1
1回答
当使用StencilJS组件的窗口被滚动时，是否可以更改它的样式？
我有以下代码：
import { h } from '@stencil/core';
import { Component, Prop } from '@stencil/core'
@Component({
tag: 'example-component',
styleUrl: './example-component.css',
shadow: true
})
export class ExampleComponent{
@Pr
浏览 1提问于2020-01-15得票数 0
回答已采纳
如果我在StencilJS中有这样的东西。 <mycomponent>
<my-other-compoent></my-other-compoennt>
</mycomponent> 我可以在任何子组件更新时通知<mycompoent>吗？
浏览 6提问于2019-07-02得票数 1
我想在我的StencilJS组件中添加一个getter / setter。正如我目前所知道的，您不能在@Prop()中使用get / set逻辑。如何在StencilJS组件中生成类似的逻辑？
例如，假设我有以下角组件，可以执行以下操作：
@Input()
get enabled(): boolean {
return this._enabledOverride == null ? this._getDefaultEnabled() : this.enabledOverride;
}
set enabled(value: boolean) {
this._ena
浏览 2提问于2020-03-18得票数 0
可以在Stencil.js中使用W3School中的简单菜单动画吗？
我正在尝试设置单击事件的样式，但我无法使其工作。事件正在触发，但我无法设置类。
在我的.tsx中：
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'topbar-component',
styleUrl: 'topbar-component.css',
shadow: true
})
export class Topbar {
private menuToggl
浏览 22提问于2019-11-12得票数 4
回答已采纳
2回答
将函数传递给模具组件
、、、
可以将函数传递给stencilJs组件吗？
类似于：
@Prop() okFunc: () => void;
我有一个模式，并希望动态调用在模式页脚中单击的Ok按钮上传递的函数，就像普通HTML按钮上的onClick一样。
浏览 6提问于2018-03-20得票数 5
我正在尝试将我的Range7项目与StencilJS集成，以便我可以使用自定义的web组件/元素，并且我正在遵循StencilJS网站上的集成指南。
我的指示是：
使用模板构建的组件集合包含一个主函数，用于加载集合中的组件。该函数称为defineCustomElements()，在引导应用程序期间，需要调用它一次。这样做的一个方便地方是在main.ts中：
我尝试在我的defineCustomElements()文件中导入main.ts，如下所示：
但我得到了以下错误：
[ts] Cannot find module 'test-components/dis
浏览 1提问于2019-01-31得票数 2
2回答
因此，我正在尝试将第三方npm模块'rss-parser‘导入到我的Stenciljs项目中。我尝试了一下，就像官方文档中那样： let Parser = require('rss-parser');
let parser = new Parser();
(async () => {
let feed = await parser.parseURL('https://www.reddit.com/.rss');
console.log(feed.title);
feed.items
浏览 21提问于2019-01-11得票数 0
2回答
我在Stenciljs中创建了一个新项目，但在使用该项目中创建的组件时遇到问题。
import { Component, h, Prop } from '@stencil/core';
@Component({
tag: 'fd-story',
styleUrl: './story.css',
shadow: true
})
export class Story {
@Prop() name = '';
render() {
return (
&
浏览 35提问于2020-02-06得票数 3
我正在使用StencilJS开发一个web组件库，但我在使用CSS +选择器时遇到了问题。我有一个Breadcrumb web组件，它将包含多个breadcrumb项(web组件也是如此)。每个Breadcrumb项目后的第一个项目应该添加>与::before的smybol。因此，我使用CSS + selector df-breadcrumb.tsx export class DFBreadcrumb {
render() {
return <ol class="breadcrumb">
<slot></slot&
浏览 24提问于2019-09-10得票数 0
我正在创建一组web组件，不确定如何为stenciljs web组件创建通用的css。基于文档，我可以添加globalStyle: 'src/global/app.css'，但似乎只能共享css变量。例如：
:root {
--font_color: #484848;
--bg_color--light: #f9f9f9;
}
如果我想要按钮的共同的基本css。
button {
border-radius: 5px;
padding: 2px 10px;
}
我想在所有的组件中共享它，但不确定如何实现它。提前感谢您的建议。
浏览 2提问于2020-04-04得票数 3
回答已采纳
我有一些使用stenciljs创建的web组件。当我从一开始就将它们包含在html中时，一切都很好，请参见示例。 <codext-gradient-button color="darkblue" class="hydrated">Gradient
Button - Darkblue</codext-gradient-button>
<script type="text/javascript" src="https://unpkg.com/@codext/stencil-
components@0.0.6
浏览 20提问于2019-03-28得票数 2
我已经使用初学者项目创建了一个stenciljs webcomponents，并且我试图通过package.json依赖性(它指向git )将它捕获到另一个stenciljs项目中。
webcomponent是导入进来的，但是当我试图在tsx stenciljs项目中运行组件时，我注意到以下几点：
--道具没有传入，我可以看到它正在应用，但是如果我在页面上添加了一些额外的内容，比如字符或其他东西，那么开发服务器就会呈现webcomponent (也尝试构建项目，相同的行为)，webcomponent也包含一些.svgs，即使在页面上添加了一个字符之后，这些图标仍然不会呈现<代码>F
浏览 1提问于2020-12-22得票数 4
我想将现有的React组件封装在StencilJS组件中。
我有一种mvp功能，可以在StencilJS componentDidRender钩子元素中调用componentDidRender，并在呈现进入react子元素之后进行工作，但是我想知道是否有更好的方法来实现这一点。
我不喜欢这样做，这需要主机内部的两个包装器元素，手动将插槽移到React组件中感觉很不舒服。
示例代码--我在这里尝试呈现的现有react组件是一个来自react-bootstrap项目的Bootstrap警报，就像一个例子一样。
import {
Component,
ComponentInterfa
浏览 2提问于2020-05-27得票数 3
回答已采纳
1回答
如何从父组件中触发子组件函数，并使用stenciljs发送数据
在<parent-component>中，我尝试运行一个函数onClick，然后在一个函数中将数据发送到<child-component>，而不使用@Listen装饰器。
浏览 16提问于2020-11-04得票数 0
我有一个Bitbucket管道，用于StencilJs项目，该项目的第一步是使用package.json使用npm version patch增加版本号。这很好，我把它推回存储库和所有的地方，没有问题。下一步是构建StencilJs项目。这里的问题是，这个项目是使用旧版本号构建的，而不是我碰到的那个版本。因此，package.json中的原始版本可能是1.0.3。第一步将版本推到1.0.4，并将其推送到存储库。我希望下一步使用1.0.4版本构建组件，但它没有，在构建时仍然使用1.0.3。
有谁知道我如何使版本1.0.4的构建出来？
好样的，拉尔斯
浏览 6提问于2021-06-15得票数 0
我有下一个使用Yarn工作区的环境：
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Binaries:
Node: 12.14.1 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
我正在尝试修复下一个错误：
正如您所看到的，我有3个选项来解决我的问题，但是我使用的是Stenciljs
浏览 22提问于2020-02-11得票数 3
回答已采纳
我的目标是在分发包中提供一个css文件，如果需要，用户可以使用它。
为此，我想创建一种全局scss文件，但我想避免这种样式附加到每个组件+它也不会被组件直接使用。因此，我想在/src文件夹中的某个位置创建my-style.scss文件。
将此文件编译为my-style.css并将其复制到dist文件夹的最佳方法是什么？
浏览 0提问于2018-07-09得票数 3
1回答
在Stenciljs中，是否可以分别导出同一项目的两个模块？ 我想创建主机，可以有来自同一项目的多个web组件，当需要时，我们可以在任何其他项目中导入它。
浏览 11提问于2020-06-25得票数 0
我已经在main.js文件中导入了jQuery，但它仍然抛出此错误 Uncaught ReferenceError: jQuery is not defined at eval (navbar.js) 我无法解决这个问题。我尝试了所有可能的方法在main.js中导入 我在public/index.html文件中使用了jQuery CDN链接，这个错误消失了，但navbar.js文件中的导航栏脚本根本不起作用。 使用npm npm install jquery --save安装了jquery navbar.js (function ($) {
'use strict';
浏览 12提问于2021-06-27得票数 1
回答已采纳
几周前我开始使用Stencil，我想知道是否有一种方法可以设置一个全局的sass文件来处理拼写错误。 我已经在全局文件夹下创建了一个variables.scss文件，我也尝试了global.scss，但没有成功。
浏览 21提问于2020-03-25得票数 0
回答已采纳
我正在为BigCommerce商店使用StencilJS powered模板，但在编辑订单确认页面上的致谢文本时遇到问题。
checkout.html和order_confirmation.html页面使用{{checkout.order_confirmation_content}}来显示内容，其中还包括一个标题和几个按钮。
我想我可能遗漏了一些重要的东西。
谢谢
浏览 0提问于2019-07-15得票数 0
我在stenciljs中有一个阴影组件，比如
@Component({
tag: "digital-verification",
styleUrl: "digital-verification.scss",
shadow: true,
})
我有一些css变量，比如
:host {
--app-primary-color: #488aff;
--app-border-radius: 10px;
--app-error-color: #EE320C;
}
到目前为止，一切都运行得很好，没有问题。
现在我想在代码中设置这个变量，如
浏览 13提问于2020-11-12得票数 0
1回答
我在我的stenciljs应用程序的app-root.txs文件中声明了以下路由：
<main id="main">
<div class="ba-content-header">
<stencil-router>
<stencil-route url="/" component="post-home"/>
<stencil-route url="/editor" component="pa
浏览 8提问于2021-07-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
