preview.js中import SCSS文件会报错，因为Storybook preview环境不运行Sass编译器，仅支持纯CSS或已编译样式；典型错误是“You may need an appropriate loader”，根源在于SCSS语法（如@mixin、$变量、嵌套）无法被JS运行时解析。
preview.js里import了SCSS文件，为什么报错
直接在 preview.js 中 import '../src/style/main.scss' 会失败，因为 Storybook 的 preview 环境不是构建上下文，不运行 Sass 编译器。遇到 You may need an appropriate loader 就是典型表现——它只认纯 CSS，不认识 @mixin、$color-primary 或嵌套语法。
常见错误写法包括：
-
import './src/style/variables.scss'（路径错 + 文件类型错） -
import 'src/style/main.scss'（漏掉../，从.storybook/出发必须向上跳） -
import '../src/style/Button.module.css'（CSS Modules 不全局注入，对 iframe 无效）
怎么让 SCSS 样式真正生效到 Storybook 预览区
核心原则：把 SCSS 编译成 CSS，再 import 进 preview.js。这不是“绕过”，而是 Storybook 的设计约束。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 用
sassCLI 编译：比如sass --no-source-map --style=compressed src/style/main.scss > .storybook/main.css - 在
preview.js中写import './main.css'（路径以.storybook/为基准） - 确保输出的
.storybook/main.css是非空的、不含 Sass 语法的纯 CSS - 检查浏览器 Elements 面板中预览
<iframe>的<head>，确认有对应<style>标签
为什么不能靠 webpackFinal 配 sass-loader 解决所有问题
webpackFinal 能让组件内 import './Button.scss' 正常工作，但它不自动把全局 SCSS 注入到预览 iframe 的 <head> 中。你仍需额外配置 additionalData 或 style-loader 注入逻辑，复杂度陡增。
更关键的是：如果你同时在 preview.js 里 import 未编译的 SCSS，而 webpackFinal 又没配好 sass-loader，构建直接中断——两者混用反而放大风险。
所以优先级应该是：
- 全局重置 / 主题色 → 编译成 CSS 后
import到preview.js - 组件级样式 → 保留在组件目录下，用
webpackFinal支持scss导入即可
CDN 或第三方 SCSS 库怎么处理
像 Bootstrap、Modern Normalize 这类库，别 import 它们的 SCSS 源码（如 bootstrap/scss/bootstrap.scss），而是用它们发布的编译后 CSS 包：
import 'modern-normalize/modern-normalize.css'import 'bootstrap/dist/css/bootstrap.min.css'- 或 CDN：
import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'（注意 CSP 和跨域）
如果非要基于第三方 SCSS 定制，必须本地编译：先 @import 它的入口 SCSS，加自定义变量，再用 sass 命令吐出纯 CSS，最后 import 到 preview.js。
真正容易被忽略的点是：你以为路径对了、控制台没报错，就等于样式生效了。其实得去 iframe 的 <head> 里亲手翻一遍 <style> 标签——那里才是唯一真相。
