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