Sveltekit+SCSS项目中Marked渲染内容样式不生效求助

我正在使用Sveltekit + SCSS开发项目，通过marked npm包在.svelte页面中渲染Markdown内容。目前已经实现了Markdown解析功能，但渲染后的内容无法应用样式。我尝试在全局CSS中为h1、h2、h3等标签设置样式，但均未生效，而项目中其他元素的样式都正常。

渲染代码如下：

import { marked } from 'marked';
import DOMPurify from 'dompurify';

let markdownContent = '';
let clean;

markdownContent = setups[0].description;

clean = DOMPurify.sanitize(marked(markdownContent));

相关效果截图：

• Markdown输出效果：
• 开发者工具输出：

1. 确认全局样式文件正确导入 #

SvelteKit的全局样式必须在根布局+layout.svelte中导入，不能仅在单个组件内导入。假设你的全局SCSS文件路径是src/lib/styles/global.scss，需要在+layout.svelte中添加：

<script>
  import '$lib/styles/global.scss';
</script>

这样全局样式才能作用到所有组件，包括通过{@html}插入的动态DOM元素。

2. 给Markdown容器添加类名，针对性编写样式 #

在渲染Markdown的容器上添加自定义类名（比如markdown-render），然后在全局样式中针对这个类下的标签写样式，避免样式隔离影响：

<!-- 组件中渲染Markdown的代码 -->
<div class="markdown-render" {@html clean}></div>

// 全局SCSS文件中
.markdown-render {
  h1 {
    font-size: 2.2rem;
    color: #1a202c;
    margin-block: 1.8rem;
    border-bottom: 1px solid #e2e8f0;
  }
  h2 {
    font-size: 1.8rem;
    color: #1a202c;
    margin-block: 1.5rem;
  }
  p {
    line-height: 1.6;
    margin-block: 1rem;
  }
  // 其他需要的标签样式同理
}

3. 排查样式优先级问题 #

打开浏览器开发者工具，查看Markdown生成的标签（比如h1），检查是否有其他更高优先级的样式覆盖了你的全局样式。如果是，可以调整选择器的优先级（比如增加父类选择器层级），或者临时用!important验证（不推荐长期使用）。

4. 确保DOMPurify未过滤必要属性 #

如果你的Markdown内容中包含带自定义类名的元素，需要确认DOMPurify没有过滤掉class属性。可以在 sanitize 方法中配置允许该属性：

clean = DOMPurify.sanitize(marked(markdownContent), {
  ADD_ATTR: ['class']
});

内容的提问来源于stack exchange，提问作者Joshua Parker