组件 B 作为组件 A 的 slot
html 的一部分包含在内。下面的代码可能无法正常工作,因为默认情况下组件不共享样式(svelte-${hash(css)}
用于在编译过程中制作一组不同的“虚拟”命名空间:
// Component A - ./Menu.svelte
<Router>
<ul class="menu">
<Delimiter label={$format('Menu label')}></Delimiter>
{#each routes as route}
{#if route.url?.length > 0}
<li class="menu-item">
<Link to={route.url} getProps={onLinkUpdate}>
{route.title}
</Link>
</li>
{/if}
{/each}
</ul>
</Router>
// Component B - ./Menu/Delimiter.svelte
<li class="divider" data-content={label} {...$$restProps} />
此处的 Router 和 Link 是单独包的一部分(因此,考虑作为命名空间 A)。 Delimiter 是一个项目级组件(Namespace B)。它们都使用相同的样式表,即相同的 CSS 框架环境。
上面的例子被编译成了这样的:
<ul class="menu">
<li class="divider" data-content="..."></li>
<li class="menu-item">...</li>
</ul>
li
和 divider
类没有收到它的样式。但是如果分隔符组件(这一行):
<Delimiter label={$format('Menu label')}></Delimiter>
将被其直接内容替换:
<li class="divider" data-content="..."></li>
编译后的源码如下:
<li class="divider svelte-sipu9k" data-content="..."></li>
因此,问题是 - 如何正确地与包含(嵌套)到原始命名空间的外部组件“共享”样式库? (或者这是一个架构问题,我应该尝试不同的方法吗?)
最佳答案
我将发布我自己问题的答案,因为如果我正确理解框架,根本不应该有任何“级联”。似乎最初的问题不在于样式共享。这是 CSS 代码库隐含的“tree-shaking”模拟的结果。 Svelte 没有检测子组件的 CSS 用法(这些样式在父组件中进行了描述,但并未直接在同一模板中使用,因此它们已从 .css 输出中完全删除)。我找到了一些解决方法,如何将样式正确地“级联”到子组件。对我有用的解决方案(使用 Svelte 3.* 测试):
方式一(首选)
实际上,编写基于组件的样式,没有任何级联(默认情况下推荐)。
./Delimiter.svelte
<script type="text/javascript">
export let label = '';
</script>
<template src="./Delimiter.html"></template>
<style src="./Delimiter.scss"></style>
./Delimiter.html
<li class="divider" data-content={label} {...$$restProps} />
./Delimiter.scss
@import 'spectre.css/src/utilities/divider';
现在,如果您将此组件作为“嵌套”组件包含在内,它将向您的节点添加一个额外的 svelte-hash
类,并且输出 .css
将包含一组基于命名空间的样式(例如 .divider.svelte-n3dv4p
)。
例子:
<li class="divider svelte-n3dv4p" data-content="..."></li>
方式二
这正是我使用基于组件的框架想要避免的——全局样式。似乎没有(记录?)方法来制作一组嵌套组件,使它们共享几种样式(例如,一组,包含来自第三方包的一组组件和一个项目级组件).这是一种严格的基于组件或“全全局”的方法(我在这里错了吗?)。
因此,如果您有一个方便的、某种带有“全局”样式 block 的根级组件,则可以在此处添加样式,并且不会有 svelte-hash
类和命名空间.css
输出中的后缀。我不太喜欢这种方式,因为它打破了关于组件 namespace 和封装的原始想法,但在某些情况下我必须这样做(当样式是“动态的”时,即编译器无法从模板中解析它们直接存档)。来 self 的一个项目的示例:
/**
* This file represents a set of styles for the application component.
* It also includes global styles (e.g. html, body overrides) and normalization for different browsers.
* Core blocks, elements and modifiers are provided by the Spectre.css framework (https://github.com/picturepan2/spectre).
*/
// managed by Svelte Preprocess using PostCSS (https://github.com/postcss/postcss)
:global {
@import 'spectre.css/src/normalize';
@import 'spectre.css/src/base';
@import 'spectre.css/src/utilities/cursors';
@import '_styles/typography';
// for pages
@import 'spectre.css/src/utilities/position';
@import 'spectre.css/src/icons/icons-core';
@import 'spectre.css/src/icons/icons-navigation';
@import 'spectre.css/src/accordions';
@import 'spectre.css/src/codes';
@import '_styles/layout';
@import '_styles/page';
@import '_styles/github';
}
关于svelte - 嵌套 Svelte 组件的样式级联(共享),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66526637/