preview.js 不能直接 import .scss 文件，因为它在浏览器中运行，不经过 Webpack 构建流程，无法解析 SCSS 语法；必须 import 编译后的纯 CSS 文件（如 '../dist/styles.css'），并确保产物不含 @mixin、变量或 @import url()。
直接在 preview.js 里 import 编译后的 SCSS 产物（如 ../dist/styles.css）就能生效，别试图 import 原始 .scss 文件——它会立刻报 You may need an appropriate loader。
为什么 preview.js 不能直接 import .scss 文件
preview.js 是在浏览器中运行的 JS 模块，不是 Webpack 构建上下文。它只接受纯 CSS 字节流，遇到 @mixin、$color-primary 或嵌套语法时无法解析，Webpack 尚未介入，loader 根本没机会执行。
- 错误现象：
import '../src/style/button.scss'→ 控制台报错You may need an appropriate loader，构建中断 - 正确路径必须从
.storybook/目录出发计算，比如项目结构是src/style/main.scss，编译后输出到dist/main.css，则写import '../dist/main.css' - 若用了
@import url('https://...')，CORS 或 404 会导致样式静默丢失，Elements 面板里看不到对应<style>标签
如何安全生成并引入编译后的 SCSS
用 sass CLI 提前编译，确保产物是纯 CSS。推荐加进 package.json 的 build:styles 脚本里，避免手动操作遗漏。
- 命令示例：
sass --no-source-map --style=compressed src/style/index.scss dist/styles.css - 编译后检查产物：打开
dist/styles.css，确认无@mixin、$变量、@import语句（尤其是带url()的） - 在
.storybook/preview.js中写：import '../dist/styles.css'（注意是两个点开头） - 启动 Storybook 后，打开开发者工具 → Elements → 切换到预览 iframe 的
<head>，确认该 CSS 已作为<style>标签注入
需要全局变量或 mixin？得配 webpackFinal + sass-loader
如果你的组件文件（比如 Button.module.scss）里写了 .button { @include flex-center(); color: $primary-color; }，光靠 preview.js 导入编译 CSS 是不够的——变量和 mixin 必须在组件样式加载时就可用。
立即学习“前端免费学习笔记（深入）”；
- 在
.storybook/main.js的webpackFinal中添加规则，匹配.scss文件并启用additionalData - 示例配置片段：
additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";` -
include必须显式指定路径（如path.resolve(__dirname, '../src')），否则@import会失败 - 这个配置和
preview.js的import并行不冲突：前者管组件内样式构建，后者管 iframe 全局基底
最容易被忽略的是编译产物里残留的 @import url() —— 它不报错，但样式就是不生效，且 Elements 面板里也找不到对应 <style>。务必打开编译后的 .css 文件手动扫一眼。
