嵌套 Svelte 组件的样式级联（共享）

Question

组件 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} />

此处的路由器和链接是单独包的一部分（因此，将其视为命名空间 A）。 Delimiter 是项目级别的组件（命名空间 B）。它们都使用相同的样式表，即相同的 CSS 框架环境。

上面的一个例子被编译成这样的：

<ul class="menu">
    <li class="divider" data-content="..."></li>
    <li class="menu-item">...</li>
</ul>

而 li 和 divider 类没有收到它的样式。但是如果 Delimiter 组件（这一行）：

<Delimiter label={$format('Menu label')}></Delimiter>

将替换为其直接内容：

<li class="divider" data-content="..."></li>

编译后的源码如下：

<li class="divider svelte-sipu9k" data-content="..."></li>

所以，问题是 - 如何正确地与包含（嵌套）到原始命名空间的外部组件“共享”样式库？ （或者是架构问题，我应该尝试不同的方法？）

Answer 1

我将发布我自己问题的答案，因为如果我正确理解了框架，则根本不应该有任何“级联”。似乎最初的问题不在于样式共享。这是 CSS 代码库的隐式“摇树”模拟的结果。 Svelte 没有检测到子组件的 CSS 使用情况（这些样式在父组件中进行了描述，但没有直接在同一个模板中使用，因此它们被完全从 .css 输出中删除）。我找到了一些解决方法，如何正确地将样式“级联”到子组件。对我有用的解决方案（使用 Svelte 3.* 测试）：

方式 1（首选）

实际上，编写基于组件的样式，没有任何级联（默认情况下推荐）。

./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>

方式 2

这正是我想要避免使用基于组件的框架 - 全局样式。似乎没有（记录？）方法来制作嵌套组件的“组”，使它们共享几种样式（例如，一个组，包含一组来自第三方包的组件和一个项目级组件）。这是一种严格的基于组件或“全局”的方法（我错了吗？）。

因此，如果您有一个方便的、某种带有“全局”样式块的根级组件，则可以在此处添加样式，并且您的 .css 输出中不会有 svelte-hash 类和命名空间后缀.我不太喜欢这种方式，因为它打破了关于组件命名空间和封装的原始想法，但在某些情况下我必须这样做（当样式是“动态的”时，即编译器无法从模板中解析它们）文件直接）。我的一个项目中的一个例子：

/**
 * 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';
}