CSS怎么在Storybook中为组件引入独立样式环境_配置preview.js加载全局样式-css教程-PHP中文网

✅生效：只要路径正确且文件为纯css或已编译的scss/css，preview.js中import全局css即可被storybook预览iframe加载；❌不生效常见原因包括路径错误、语法错误、跨域@import及css modules。

css怎么在storybook中为组件引入独立样式环境_配置preview.js加载全局样式

直接在 preview.js（或 preview.ts）里用 import 引入全局 CSS 文件，是最简单、最可靠的方式——它不依赖 Webpack 配置改动，也不需要额外 loader，适用于绝大多数 Storybook 项目（v6.5+ 到 v9.x）。

但要注意：这种方式只注入 CSS 规则，不支持 Sass 变量、mixin 或嵌套语法。如果项目依赖 _variables.scss 这类文件，光靠 import 是无效的。

`preview.js` 中 import 全局 CSS 是否生效？

✅ 生效：只要路径正确、文件是纯 CSS 或已编译的 SCSS/CSS，就能被 Storybook 的预览 iframe 加载
❌ 不生效常见原因：
- 路径写错，比如用了相对路径但没从 .storybook 目录出发（应使用 ../src/style/index.css）
- 文件本身有语法错误（如未编译的 .scss 写进了 import）
- CSS 文件里用了 @import url(...) 且目标资源跨域或路径不可达
- 使用了 CSS Modules（xxx.module.css），这类文件默认不会全局注入

示例正确写法：

import '../src/style/reset.css';
import '../src/style/theme.css';

为什么不能在 `preview.js` 里 `import` Sass 文件？

preview.js 是 JS 运行时上下文，不是样式构建上下文
import '../src/style/variables.scss' 会报错：You may need an appropriate loader to handle this file type
Sass 必须由 sass-loader 在 Webpack 构建阶段处理，JS 文件无法“执行” Sass 逻辑

所以：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

全局变量、mixin、函数 → 必须走 webpackFinal 配置里的 additionalData
已编译的 CSS（含 Tailwind、PostCSS 输出）→ 直接 import 到 preview.js 最省事

`webpackFinal` 配置中如何安全注入 Sass 全局变量？

这是唯一能真正让所有组件故事自动获得 $primary-color 等变量的方式。关键点：

必须匹配正确的 test 正则（如 /.s[ac]ss$/）
additionalData 字符串里用反引号包裹 @import，且路径需用 path.resolve 绝对化
不要重复添加 rule（检查是否已有 scss rule，避免冲突）

推荐写法（.storybook/main.js）：

const path = require('path');
module.exports = {
  // ...其他配置
  webpackFinal: async (config) => {
    config.module.rules.forEach(rule => {
      if (rule.test && rule.test.toString().includes('scss')) {
        rule.use.forEach(loader => {
          if (loader.loader?.includes('sass-loader')) {
            loader.options = {
              ...loader.options,
              additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`,
            };
          }
        });
      }
    });
    return config;
  },
};

容易踩的坑：