SCSS与CSS-in-JS应职责分离：SCSS负责静态、跨组件的原子/布局层样式，CSS-in-JS仅处理运行时计算、主题响应及状态驱动样式，避免混用导致优先级混乱、调试困难与构建失控。
直接混用 SCSS 和 CSS-in-JS 会导致样式优先级混乱、调试困难、构建体积不可控——这不是“能不能”，而是“该不该”以及“怎么切分边界”。
SCSS 和 CSS-in-JS 的职责必须明确隔离
SCSS 负责静态、可复用、跨组件的原子层和布局层；CSS-in-JS（如 Emotion 或 styled-components）只接管需要运行时计算、主题响应或高耦合状态的样式逻辑。比如：button 的基础尺寸/边框/字体统一走 _buttons.scss，而 status="loading" 时的旋转动画、禁用态透明度变化、主题色切换则交给 css prop 或 styled 函数。
- SCSS 文件命名建议带前缀，如
_atoms.scss、_layout.scss，避免与业务组件样式同名冲突 - CSS-in-JS 不要覆盖 SCSS 中已定义的
display、flex、padding等基础属性，否则会破坏设计系统一致性 - 若项目使用 Tailwind + SCSS 混合，务必禁用 Tailwind 的
@layer与 SCSS@import的嵌套交叉，否则 PostCSS 构建时可能丢规则
Webpack 配置需区分处理 .scss 和 .module.scss
默认 css-loader 对 .scss 和 .module.scss 的行为不同：前者走全局作用域，后者启用 modules: { auto: true }。但如果你在同一个组件里既 import './Button.module.scss' 又用 styled.div，就会出现类名哈希值无法被 CSS-in-JS 识别的问题。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 确保
webpack.config.js中css-loader的modules配置只对/\.module\.(scss|sass|css)$/生效，不匹配bootstrap/scss/或antd/es/style这类第三方路径 - 不要给 SCSS 引入的框架类（如
.ant-btn）加composes，它不支持跨文件继承 - 若用
resolve.alias映射了@styles到src/styles，记得在 Emotion 的styled组件中也保持路径一致，避免 HMR 失效
动态主题切换时，SCSS 变量与 CSS-in-JS 如何协同
纯 SCSS 变量（$primary-color）无法在 JS 运行时修改，所以主题色切换必须靠 CSS 自定义属性（--primary-color）桥接。SCSS 编译时将变量导出为 :root 下的自定义属性，CSS-in-JS 再通过 getComputedStyle(document.documentElement).getPropertyValue('--primary-color') 或直接插值读取。
立即学习“前端免费学习笔记（深入）”；
- 在
src/styles/variables.scss里写：:root { --primary-color: #007bff; }，而不是只定义$primary-color: #007bff - Emotion 中可直接：
color: ${props => props.theme === 'dark' ? 'var(--text-dark)' : 'var(--text-light)'} - 注意 SSR 场景：JSDOM 不支持
getComputedStyle，服务端渲染时应 fallback 到预设主题对象，而非依赖 CSS 变量
最容易被忽略的是构建产物中 SCSS 的 @import 层级过深导致重复打包——比如 5 个组件各自 @import '_mixins.scss'，而没提取到公共 chunk，最终样式体积翻倍。真正有效的结合，不是“两个都用”，而是让 SCSS 做减法（只保留真正需要编译期确定的），CSS-in-JS 做加法（只补足运行时必须的部分）。
