Svelte 全局样式未按预期工作

Question

所以我有一个看起来像这样的 Svelte 组件:

<div id="app">
  <h1>Page Title</h1>
  <p>Some text</p>
  <div><p>Some more text</p></div>
</div>


<style>
  div :global(p) {
    color: red;
  }
</style>

我的期望是 p 标签应该是红色的，但事实并非如此。我正在使用 webpack 构建应用程序，Svelte 的相关配置是:

{
  test: /\.html$/,
  exclude: /node_modules/,
  use: 'svelte-loader'
}

生成的样式是:

    div.svelte-f5mkpg :global(p),
   .svelte-f5mkpg div :global(p){color:red}

我正在使用 Svelte 1.59.0 和 svelte-loader 2.5.1。知道这里出了什么问题吗？我还在默认的 Sapper 应用程序中看到了这种行为。全局 CSS 实际上在 global.css 文件中，而 :global 样式似乎没有。

Answer 1

为了使用 :global(...) 修饰符，您需要明确阻止 CSS 级联:

{
  test: /\.html$/,
  exclude: /node_modules/,
  use: {
    loader: 'svelte-loader',
    options: {
      cascade: false
    }
  }
}

在版本 2 中(希望即将推出)级联将始终被阻止，但在此之前有必要将其放在一个选项后面以防止重大更改。

如果 options.cascade !== false，编译器可能会在 :global(...) 上发出警告 — 我已经 opened an issue .