SCSS 不能修改原生窗口 chrome，仅能在 frame: false 的无边框窗口中通过编译为 CSS 来定制标题栏、按钮等 Web 层 UI；需注意 Wayland 下 hasShadow 默认开启及 -webkit-app-region: drag 与事件冲突问题。
SCSS 本身不能直接定制 Electron 的“原生窗口”（即操作系统级的标题栏、边框、菜单栏等），因为这些元素由 OS 渲染，不在 Web 内容层。但如果你指的是**在无边框窗口（frame: false）中，用 SCSS 编写自定义标题栏、控制按钮、圆角阴影等 UI 样式**——那完全可行，且是当前主流做法。
关键前提是：你已放弃原生 frame，转而用 HTML/CSS/JS 全量接管窗口 UI 层。下面直说怎么做、为什么、容易卡在哪。
为什么不能用 SCSS 修改原生窗口 chrome？
原生窗口 chrome（标题栏、系统菜单、最小化按钮等）由操作系统绘制，Electron 不提供 CSS 接口去覆盖它们。即使你在渲染进程里写 body { margin-top: -30px }，也盖不到系统级区域。只有当设置 frame: false 后，整个窗口才变成一块“画布”，你的 HTML 才真正拥有顶层控制权。
如何把 SCSS 编译进 Electron 渲染进程？
Electron 渲染进程本质是 Chromium，加载的是本地 HTML 文件，所以 SCSS 必须提前编译为 CSS，并通过 <link rel="stylesheet"> 引入。不支持运行时 @import 'xxx.scss'。
- 推荐用构建工具（如 Vite、Webpack 或简单的
sass --watch src/styles/main.scss:dist/css/main.css）把.scss编译为.css - 确保
index.html中引用路径正确：<link rel="stylesheet" href="./css/main.css">（注意不是./styles/main.scss） - 若用
loadFile()加载本地 HTML，路径必须相对于index.html所在目录；若用loadURL()加载远程地址，则 CSS 需托管在服务端或内联 - 避免在 SCSS 中依赖 Node.js 环境变量（如
process.env.NODE_ENV），它在渲染进程不可用，除非通过预加载脚本注入
SCSS 在自定义窗口中能安全用哪些特性？
Chromium 支持绝大多数现代 CSS，SCSS 编译后的输出只要不触发 Electron 已知限制即可。以下可放心用：
-
@mixin封装圆角、阴影、过渡动效（如@include window-shadow-sm） -
@function计算响应式尺寸（如rem-calc(16)） -
@extend复用基础控件样式（如%btn-base） - 嵌套语法组织标题栏结构：
.titlebar { .controls { button { &:hover { ... } } } } - 但避免在 SCSS 中写
blur()试图模糊窗口背后的内容——Electron 的transparent: true窗口不支持穿透模糊，blur()只作用于自身 DOM 子树
Linux Wayland 下的特别坑点
在 Wayland（如新版 Ubuntu、Fedora）上，frame: false 窗口默认带 GTK 阴影和扩展拖拽区。这会和你的 SCSS 圆角、透明背景冲突，导致视觉错位或点击失效。
- 必须显式关闭：
hasShadow: false，否则你的border-radius: 12px会被系统阴影吃掉一部分 - 若启用
transparent: true，还需禁用调整大小：resizable: false，否则部分 Wayland 环境下窗口会崩溃或失焦 - 不要依赖
cursor: move实现拖拽——需用 Electron 的-webkit-app-region: dragCSS 属性，并确保该区域无click事件拦截，否则 SCSS 里写的 hover 效果会干扰拖拽
frame: false 后的 Web 层重绘，SCSS 只是提高这个过程的可维护性。最容易被忽略的是：Wayland 的 hasShadow 默认行为、以及 -webkit-app-region: drag 和鼠标事件的互斥关系——这两个点不处理好，再精致的 SCSS 也会在真实 Linux 环境下翻车。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
