如何移除Svelte项目的默认样式，解决自定义样式被覆盖问题？

你遇到的html.css是Svelte项目模板默认注入的全局基础样式，以下是彻底清除默认样式并只保留自定义样式的步骤：

1. 删除全局样式文件及引入 #

• 打开项目根目录下的src/routes/+layout.svelte（旧版SvelteKit为src/__layout.svelte，纯Svelte项目为src/App.svelte），移除类似如下的全局样式引入代码：

  <script>
    import '../app.css';
  </script>
  

• 直接删除项目中的全局样式文件（如app.css），如果是纯Svelte项目，还要检查index.html里的外部样式<link>标签并删除。

2. 关闭SvelteKit的默认样式注入 #

若使用SvelteKit，默认会通过@sveltejs/vite-plugin-svelte注入基础样式，需在配置文件中禁用：

• 编辑vite.config.js或vite.config.ts：

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [
      sveltekit({
        compilerOptions: {
          css: false // 禁用默认样式处理
        }
      })
    ]
  });
  

  注意：css: false会关闭Svelte的组件样式自动处理，若需保留组件内样式，跳过此步，改用下方重置方案。

3. 用CSS重置覆盖所有默认样式 #

如果需要保留Svelte的样式处理能力，可在自定义全局样式顶部加入完整的CSS重置代码，彻底覆盖浏览器默认样式和项目自带基础样式：

/* 全局重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 自定义样式写在重置代码之后 */
h1 {
  font-size: 30px;
}

将这段代码放入你的自定义全局样式文件，并确保它是项目中唯一引入的全局样式。

4. 排查第三方依赖的样式注入 #

若以上步骤无效，检查package.json中的依赖项，确认是否有带默认样式的第三方UI库（如svelte-material-ui、flowbite-svelte），要么卸载不必要的库，要么参考其文档禁用默认样式。

内容的提问来源于stack exchange，提问作者Lee Morgan