如何在Svelte/SvelteKit中配置全局SCSS文件？

嘿，刚接触Svelte的话，确实容易在全局样式这里踩坑，我来一步步帮你搞定这个问题！

• 第一步：安装必要的SCSS依赖
  SvelteKit默认没有自带SCSS编译支持，你得先装官方推荐的Dart Sass依赖。打开终端跑这个命令就行：
  npm install sass --save-dev
  这一步很关键，之前你可能漏掉了它，导致SCSS文件没被正确编译。

• 第二步：修正+layout.svelte里的样式导入写法
  你之前在+layout.svelte里的style标签有个小问题：Svelte的style标签默认是作用域化的，它会自动给样式加唯一的属性选择器，只让样式作用于当前组件内的元素。但你要的是全局生效的样式，所以得告诉Svelte别给这个style标签加作用域。

  把你的style标签改成这样：

  <style lang="scss" global>
    @import '../assets/css/AppGlobal.scss';
  </style>
  

  加上global属性后，Svelte就会把这个样式表作为全局样式注入到整个应用里，不会修改任何选择器。

• 第三步：确认文件路径是否正确
  检查一下你的AppGlobal.scss路径对不对：如果+layout.svelte在src/routes/目录下，而AppGlobal.scss在src/assets/css/下，那../assets/css/AppGlobal.scss这个相对路径是没问题的。要是路径写错了，SCSS文件根本没被导入，自然看不到样式效果。

• 第四步：重新构建并预览
  现在跑npm run build重新构建项目，再用npm run preview预览。这时候你的全局SCSS样式应该就能正常加载生效了。

另外，你提到的那些“未使用CSS选择器”的警告，是Svelte默认的CSS Tree Shaking功能导致的——它会检测哪些选择器没在Svelte组件里直接使用，然后给出提示。但你的样式是全局的（可能作用于原生HTML元素或者第三方组件），这些警告完全可以忽略。要是看着烦，之后也可以在svelte.config.js里配置关掉它，不过新手阶段先保证样式能正常工作就好。

备注：内容来源于stack exchange，提问作者Patrick Kenny