Electron项目中直接import SCSS会报错，因渲染进程不解析.scss，须由Webpack/Vite编译；主题需独立SCSS入口、动态entry生成CSS文件，并确保HTML中正确引用同级CSS路径。
Electron项目里直接 import SCSS 文件会报错
因为 Electron 渲染进程默认不解析 .scss，import './styles/main.scss' 会直接抛 Module parse failed: Unexpected character '@'。必须通过构建工具（Webpack/Vite）接管样式编译流程，否则 SCSS 根本进不了 Chromium。
常见错误现象：热更新失效、CSS 不生效、变量未替换、路径报 404 —— 全是构建链路断在 SCSS 编译环节。
- Webpack 需要
css-loader+sass-loader+MiniCssExtractPlugin - Vite 默认支持
.scss，但需确认sass或node-sass已安装（npm install -D sass） - Electron 主进程不能 import 任何样式文件，只在渲染进程 JS 中 import 才有意义
SCSS 主题必须靠多入口编译，不能 runtime 切换
想用 $theme: 'dark' 变量控制所有样式？不行。SCSS 是编译时语言，@use 'variables' with ($bg-color: #1e293b) 这类覆盖只对当前入口文件生效，且编译后就固化成 CSS 字面量。
如果你把 light/dark 写在一个 main.scss 里，最终只会输出一份 CSS，两个主题的变量会互相覆盖或静默丢弃。
立即学习“前端免费学习笔记（深入）”；
- 每个主题必须有独立 SCSS 入口文件，如
themes/theme-dark.scss、themes/theme-light.scss - 入口文件只能做两件事：
@use 'variables' with (...)+@use 'components/button' - 禁止在入口里写
$primary-color: #3b82f6直接赋值，会破坏@use命名空间隔离 - 变量必须抽到
_variables.scss，所有主题都@use 'variables'，不能@import
Webpack 动态 entry + MiniCssExtractPlugin 输出独立 CSS 文件
Webpack 默认只认一个 entry，要生成 theme-dark.css 和 theme-light.css，就得让每个主题 SCSS 文件都成为独立 entry 点。
否则你改了 _variables.scss，Webpack 会全量重编译所有主题，严重拖慢开发体验。
- 在
webpack.config.js中用fs.readdirSync('./themes')扫描所有.scss文件 - 动态构造
entry对象：{ 'theme-dark': './themes/theme-dark.scss', 'theme-light': './themes/theme-light.scss' } -
MiniCssExtractPlugin.filename设为[name].css，确保输出名与入口名一致 - 务必开启
watchOptions.ignored: /node_modules/，否则改一个变量文件可能触发全部重编译
Electron 加载独立 CSS 文件时路径最容易出错
打包后 file:// 协议下路径解析和开发时完全不同。用 ./styles/theme-dark.css 在 dev 模式能跑，打包后八成 404。
根本原因：Webpack 输出的 CSS 文件被放进 dist/，而 Electron loadFile('./dist/index.html') 加载 HTML 后，相对路径基准是 dist/ 目录，不是项目根目录。
- HTML 中用
<link rel="stylesheet" href="./theme-dark.css">，确保 CSS 和 HTML 同级 - 不要用
__dirname拼接 CSS 路径——那是 Node.js 的路径，Chromium 不认file:///C:/.../theme-dark.css这种绝对路径 - 如果用 preload 脚本注入样式，
fs.readFileSync读取的是主进程路径，必须用path.join(__dirname, '../dist/theme-dark.css')定位 - 禁用
nodeIntegration时，别在渲染进程里直接require('fs')，会报错
