CSS 没有改变 Svelte +乔塔
在过去的几天里，我一直在学习Svelte，现在我试图将其与Chota结合使用。我正在遵循Chota Docs的DAMB模式说明，但不会改变。此外，如果我添加自己的CSS，它就不会更新。 应用程序。
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
</svelte:head>
<script>
console.log("Checking!");
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
console.log("Dark!");
}
export let name;
function handleClick() {
alert("Hello " + name)
}
</script>
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">{name}</a>
<div class="tabs">
<a>Link 1</a>
<a class="active">Link 2</a>
</div>
</div>
<div class="nav-right">
<a class="button outline" on:click={handleClick}>Button</a>
</div>
</nav>
<style>
body.dark {
/* The background-color doesn't change anything, and neither does the other css. */
background-color: red !important;
--bg-color: #000;
--bg-secondary-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #777;
}
</style>
这是我的 我添加了！对CSS很重要，但它并没有改变任何事情。
编辑：
我一直在进行更多的CSS测试，看来：root选择器可以通过变量（尚未使用非变量测试）来正常工作，但是body.dark Selector甚至不会编译到Bundle.css文件中。
I have been learning Svelte for the past couple days and now I am trying to use it in combination with Chota. I am following the Chota docs instructions for dark mode but it won't change. In addition, if I add my own CSS it wont update. Here is my App.svelte:
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
</svelte:head>
<script>
console.log("Checking!");
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
console.log("Dark!");
}
export let name;
function handleClick() {
alert("Hello " + name)
}
</script>
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">{name}</a>
<div class="tabs">
<a>Link 1</a>
<a class="active">Link 2</a>
</div>
</div>
<div class="nav-right">
<a class="button outline" on:click={handleClick}>Button</a>
</div>
</nav>
<style>
body.dark {
/* The background-color doesn't change anything, and neither does the other css. */
background-color: red !important;
--bg-color: #000;
--bg-secondary-color: #131316;
--font-color: #f5f5f5;
--color-grey: #ccc;
--color-darkGrey: #777;
}
</style>
I have made sure that the code that adds the class is executing, and it is. I have added !important to the CSS yet it doesn't change anything.
EDIT:
I have been doing some more CSS testing and it seems that the :root selector works fine with variables (haven't tested with non-variables), but the body.dark selector doesn't even compile into the bundle.css file.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您应该收到
未使用的 CSS 选择器“body.dark”警告。这是因为默认情况下
您可以通过以下方式使用选择器来设置外部元素的样式：
或者如果样式标签中的所有选择器都应该是全局的，则使用
https://svelte.dev/docs#component-format-style
You should get an
Unused CSS selector "body.dark"warning.That's because by default all css inside the
<style>tag is scoped to the html inside the component.You are able to use selectors that style elements outside the by using:
or if all selectors in the style tag should be global use
https://svelte.dev/docs#component-format-style