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中（即将推出）希望级联将始终，但是必须将其置于一个选项之后才能防止发生重大变化。

编译器可以:global(...)警告options.cascade !== false - 我opened an issue。

Svelte全局样式无法按预期工作

1 个答案: