preview.js 中不能直接 import scss 文件，必须先编译为纯 css 再 import；组件内使用 sass 变量需在 main.js 的 webpackfinal 中配置 sass-loader 并注入变量文件；css modules 文件不可在 preview.js 中 import，应由组件自身导入。
preview.js里import SCSS文件会直接报错
别试了，import '../src/style/main.scss' 在 preview.js 里一定会触发 You may need an appropriate loader。因为 preview.js 是浏览器中运行的 JS 模块，不是 Webpack 构建上下文，它根本没法解析 $color-primary、@mixin 或嵌套语法。
真正能用的只有纯 CSS 字节流——所以你得先编译 SCSS，再 import 编译结果：
- 用
sass --no-source-map --style=compressed src/style/main.scss dist/styles.css提前生成 - 确保
dist/styles.css里没有@import url()、$变量、@mixin、@function - 在
.storybook/preview.js中写import '../dist/styles.css'（注意是两个点开头） - 启动 Storybook 后，打开预览 iframe 的
，确认有对应<style></style>标签
组件里要用 Sass 变量？必须配 webpackFinal
如果你的 Button.module.scss 里写了 .button { color: $primary-color; @include flex-center(); }，光靠 preview.js 导入编译后的 CSS 是没用的——变量和 mixin 在组件样式构建时就得可用。
这时得在 .storybook/main.js 的 webpackFinal 里加 sass-loader 配置：
-
include必须显式指向源码路径，比如path.resolve(__dirname, '../src') -
additionalData里用@import注入变量文件：@import "${path.resolve(__dirname, '../src/style/variables.scss')}"; - 顺序不能错：必须是
sass-loader→css-loader→style-loader（或mini-css-extract-plugin） - 这个配置和
preview.js的import并行不冲突：一个管组件内样式构建，一个管 iframe 全局基底
CSS Modules 文件不能往 preview.js 里 import
import '../src/components/Button.module.css' 在 preview.js 里不会报错，但也不会生效。CSS Modules 默认启用局部作用域，它的规则只注入到组件自身，不会塞进预览 iframe 的 。
想让组件样式“看起来像在真实环境里”，你应该：
- 在组件文件里正常 import 对应的
.module.css或.module.scss（Storybook Next.js 框架下开箱即用） - 把重置、主题、工具类等全局规则，单独抽成非 module 的 CSS/SCSS，编译后由
preview.js加载 - 避免在
preview.js里 import 任何带module字样的文件名 - 如果用了 Tailwind，记得
content配置要覆盖stories目录，否则md:flex这类响应式类根本不会生成
跨域 @import 和动态类名是静默失效重灾区
最容易被忽略的是：即使 preview.js 的 import 路径全对、文件也编译好了，样式仍可能不生效，且控制台无报错。
典型静默失效场景：
- CSS 文件内部含
@import url('https://cdn.example.com/theme.css')→ 浏览器拦截 CORS，Network 面板显示 Blocked，Elements 面板里压根没<style></style> - 故事文件里写
class={`text-${size}-lg`}→ Tailwind JIT 静态扫描无法识别，生成的 CSS 里没有对应规则 - 重置样式被组件内联样式覆盖 → 检查 Elements 面板里
<style></style>是否存在，再看计算样式（Computed）面板里实际生效的 color / margin 是谁给的 - 路径看似正确，但
require.resolve('../src/style/reset.css')报错 → Node.js 解析失败，说明路径越界或文件不存在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
