sveltekit 不支持 css modules，应使用 scoped 样式+scss预处理器+@use/@include复用；需配置 svelte-preprocess 和 sass，避免 @extend 破坏隔离，class 直接写无需 styles.btn。
在 SvelteKit 中，CSS Modules 本身不被原生支持 —— 它不是 Svelte 编译器默认处理的样式机制，强行套用 React 风格的 .module.css 导入会报错或失效。真正可用、且符合 SvelteKit 工程实践的组合是：scoped 样式 + 预处理器（如 SCSS/Less）+ composes 或 @use 复用逻辑。
为什么不能直接用 .module.css 文件？
SvelteKit 的构建流程（基于 Vite + Svelte 预处理器）不会识别或解析独立的 .module.css 文件。你写 import styles from './Button.module.css'，Vite 会把它当普通 CSS 模块处理（返回空对象或原始字符串），Svelte 编译器也不会注入 $style 对象到组件作用域中。
- 错误现象：
Cannot read property 'button' of undefined或控制台显示styles是空对象 - 根本原因：Svelte 的
$style仅对<style module></style>标签有效，而该语法在 Svelte 中并不存在（那是 Vue 的写法） - 替代路径：Svelte 的模块化能力来自
<style></style>的自动 scoped 行为，以及通过预处理器实现的逻辑复用
<style lang="scss"></style> 必须配 svelte-preprocess
不配置预处理器，lang="scss" 会被当作无效属性忽略，SCSS 语法（如嵌套、变量、@mixin）直接报错或编译失败。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 安装依赖：
npm install -D svelte-preprocess sass（sass是 Dart Sass，推荐；不用node-sass） - 在
svelte.config.js中启用：import preprocess from 'svelte-preprocess';export default { preprocess: preprocess({ scss: { importer: [] } }) }; - 注意：Vite 插件链中，
svelte-preprocess必须在sveltekit()之前执行，否则 SCSS 不会被解析 - 常见坑：
lang="scss"写了但没装sass包 → 报错Failed to load PostCSS config或Unknown word
用 composes 实现类名复用，替代 CSS Modules 的 composes 语义
Svelte 不支持 CSS Modules 的 composes 声明，但你可以用 SCSS 的 @use + @include 或 @extend 达成类似效果，且更可控。
- 建一个
src/lib/styles/_mixins.scss：@mixin button-base { padding: 0.5rem 1rem; border: none; border-radius: 4px; font-weight: 500; } - 在组件中使用：
<style lang="scss"> @use '$lib/styles/mixins' as *; .primary { @include button-base; background-color: #007bff; color: white; } </style> - 避免用
@extend跨组件复用 —— 它会把选择器“拷贝”进当前作用域，破坏 scoped 隔离性；@include是函数式调用，只注入声明，安全 - 若需跨组件共享类名（比如统一
.sr-only），放在全局 CSS 中，用<style global></style>引入，不要强塞进 scoped 块
scoped 样式已足够隔离，别为“模块化”强行加层
Svelte 的 <style></style> 默认就是 scoped：编译后所有选择器自动追加唯一哈希类（如 .btn.svelte-abc123），动画 @keyframes 也会重命名。这比 CSS Modules 的哈希类名更彻底，也无需 JS 层访问 $style。
- 不需要在模板里写
class={styles.btn}—— 直接写class="btn"即可，它天然局部 - 想动态切类？用
class:btn={isActive}或class="btn {size}"，和 scoped 共存无冲突 - 真要导出类名给父组件用？用
export let className = ''+class="btn {className}"，语义清晰，不破环封装 - 最易被忽略的一点：scoped 不阻止你用属性选择器（如
[data-theme="dark"] .btn），这种“穿透”需手动加:global(...)，别误以为是 bug
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
