Storybook 怎么引入全局 CSS 并配置 CSS Modules 让样式与组件应用保持一致【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook组件在真实应用里靠全局 CSS 和 CSS Modules 保证视觉正常但在 Storybook 中单独渲染时Storybook 并不会自动替你处理这些样式。Storybook 对“如何生成或加载 CSS”不做任何假定它只渲染你提供的 DOM 元素组件样式经常需要在 Storybook 的渲染环境里做一点额外配置才能“看起来对”。这篇文章面向已经初始化好 Storybook项目根目录有.storybook配置目录并使用 Vite 或 Webpack 构建的项目说明两条配置路径把项目的全局 CSS 引入到所有 story以及让 CSS Modules 像在你的应用里一样被正确解析最终让 story 的样式与组件应用保持一致。先确认样式注入位置preview iframe不是 Manager UI在动手配置前需要明确一个边界你引入的 CSS 会被注入到渲染组件的 preview iframe也就是 Canvas里而不是 Storybook 的 Manager 界面。所有针对样式的配置都是为了让组件预览环境带上你的应用样式Manager 的外观不在这条路径的讨论范围内。全局代码例如 CSS 导入、JavaScript mock应该放在 preview 文件中。Storybook 通过.storybook/preview.ts|tsx或.js|jsx控制所有 story 的渲染方式这个文件在 Canvas 中加载因此它导出的内容对每个 story 都生效。主路径在 preview 文件中 import 全局 CSS推荐所有 Storybook 都预配置了 CSS 文件的 import 支持。要给所有 story 添加全局 CSS就在 preview 文件中 import 它。以文档给出的示例为例其中../src/styles/global.css是文档示例路径请替换为你项目全局样式表的实际路径路径相对于.storybook目录解析// .storybook/preview.js import ../src/styles/global.css; export default { parameters: {}, };如果 preview 文件是 TypeScript文档同时给出了带类型标注的写法注意其中的your-framework需要替换为你实际使用的框架包文档列举的示例包括 react-vite、nextjs、vue3-vite 等// .storybook/preview.ts // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. import type { Preview } from storybook/your-framework; import ../src/styles/global.css; const preview: Preview { parameters: {}, }; export default preview;这条路径有一个直接的验证方式preview 文件中 import 的 CSS 文件受 HMR热模块替换支持你修改样式后无需重启 Storybook 服务就能在预览里看到变化。如果你希望样式只跟随某个组件而不是全局生效也可以在组件文件里直接 import 它自己的 CSS 文件这在 Storybook 中同样有效。只是当组件使用了 Sass、PostCSS 之类的 CSS 处理工具时可能需要按下面“配置 CSS Modules”一节的说明补充构建配置。备选用 preview-head.html 引入静态 CSS如果全局 CSS 以静态文件的方式引入更合适可以创建.storybook/preview-head.html文件用link标签加载它!-- .storybook/preview-head.html -- !-- Load your CSS file -- link relstylesheet hrefpath/to/your/styles.css /其中path/to/your/styles.css是文档中的占位写法需要替换为你的样式文件实际路径。这条路径与主路径的关键差别在于preview-head.html里的文件不受 HMR 支持改动样式后必须重启 Storybook 服务才能看到变化。如果希望改动即时生效优先使用 preview 文件 import 的方式。配置 CSS Modules按构建器区分CSS Modules 的支持取决于构建器配置要求不同Vite自带 CSS Modules 支持开箱即用。如果你在vite.config.js里自定义过 CSS Modules 配置这份配置会自动应用到 Storybook无需在 Storybook 侧重复配置。Webpack需要额外配置。文档建议安装storybook/addon-styling-webpack来帮助你配置这些工具。storybook/nextjsStorybook 会重建你的 Next.js 配置因此 CSS Modules 可以直接在 story 中使用不需要任何额外配置。组件侧的用法与在你的应用里一致。文档给出的示例组件Sass/Scss 模块同样受支持示例中的Button.module.scss、Button.module.sass写法见注释// src/components/Button.js // This import will work in Storybook import styles from ./Button.module.css; // Sass/Scss modules are also supported // import styles from ./Button.module.scss // import styles from ./Button.module.sass export function Button() { return ( button typebutton className{styles.error} Destroy /button ); }验证样式是否生效与已知边界完成配置后按以下方式核对结果打开 Storybook确认样式作用在渲染组件的 preview iframe 里而不是 Manager UI——这是文档明确的行为边界。修改一次全局 CSS如果走的是 preview 文件 import不重启服务即可看到更新如果走的是preview-head.html需要重启 Storybook 服务后才生效。打开使用了*.module.css的组件 story确认类名按 CSS Modules 的方式被解析并应用到组件上。需要注意的限制如果你的样式经过 PostCSS 或 Sass/Preprocessor 处理Vite 下这些能力同样是开箱即用的Webpack 下同样建议通过storybook/addon-styling-webpack配置或者自行调整 Storybook 的 webpack 配置加入对应 loader。组件文件里直接 import 的 CSS 在配合 CSS 处理工具时可能需要上面提到的构建配置否则样式可能“看起来不对”。进一步阅读可以回到仓库内的原始文档Styling and CSS 总览、preview 文件与 head 注入说明、preview 文件的职责 以及 组件样式渲染的入门说明。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考