在Storybook组件库文档中如何全局引入业务CSS-css教程-PHP中文网

最常见原因是路径错误或文件类型不匹配：preview.js 以 .storybook/ 为基准，需用相对路径如 '../src/style/reset.css'；仅支持纯 css 或已编译样式，不支持未编译的 .scss 文件。

在storybook组件库文档中如何全局引入业务css

preview.js 中 import 全局 CSS 为什么没生效

最常见原因是路径错误或文件类型不匹配。preview.js 是从 .storybook/ 目录执行的，所有 import 路径必须以此为基准向上跳转。比如项目结构是 src/style/reset.css，正确写法是 import '../src/style/reset.css'，而不是 ./src/style/reset.css 或 src/style/reset.css。

另外，preview.js 只能加载纯 CSS 或已编译完成的样式（如 Tailwind 构建后的 dist/tailwind.css），不能处理未编译的 .scss 文件——它不是构建上下文，遇到 @mixin 或 $color-primary 会直接报 You may need an appropriate loader 错误。

检查浏览器开发者工具 Elements 面板中预览 iframe 的，确认是否有对应 <style></style> 标签，而非只看控制台是否报错
如果用了 @import url('https://...')，CORS 策略可能拦截，控制台会出现跨域错误
引入了 Button.module.css 这类文件？CSS Modules 默认不全局注入，import 后规则仅作用于模块内部，对 Storybook iframe 无效

哪些 CSS 文件适合直接 import 到 preview.js

只要满足“构建后可用”，就能安全走这条路径。典型可直接 import 的包括：

Tailwind 编译产物，例如 dist/tailwind.css 或 src/style/tailwind-output.css
PostCSS 处理后的重置样式（reset.css）、主题色定义（theme.css）
手动编译的 SCSS：sass --no-source-map --style=compressed src/style/main.scss > dist/main.css 输出的纯 CSS
CDN 上托管的纯 CSS（如 https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.css），但需确认项目无 CSP 限制

这类文件不含变量、mixin、嵌套语法，JS 运行时能直接解析并注入到 iframe 的中，无需额外 Webpack 配置。

需要 Sass 变量时必须用 webpackFinal 配置

如果你的组件样式里写了 color: $primary-color，光靠 preview.js 的 import 不起作用——Sass 变量必须在构建阶段由 sass-loader 注入。这时得在 .storybook/main.js（或 main.ts）里配 webpackFinal：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

const path = require('path');
module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: `@import "${path.resolve(__dirname, '../src/style/variables.scss')}";`,
          },
        },
      ],
    });
    return config;
  },
};

关键点：

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

为什么不能在 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 逻辑。

所以：