使用 Storybook 5 导入全局 PostCSS

Question

在 Storybook v4 中，我通过两个步骤加载了我的 React 应用程序的 PostCSS 文件：

1. 首先，我在./.storybook/webpack.config.js更新了Storybook的Webpack配置。

    // https://github.com/storybookjs/storybook/issues/6319#issuecomment-477852640
    config.module.rules = config.module.rules.filter(
      f => !f.test || f.test.toString() !== '/\.css$/'
    );

    config.module.rules.push({
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader'],
      include: path.resolve(__dirname, '../'),
    });

2. 然后我添加了import "../src/styles.css" in./.storybook/config.js`

不幸的是，在升级到 Storybook v5 之后（现在使用单个 main.js 文件），我无法简单地在该文件的顶部导入我的样式。

给定一个从 CRA 生成的 React 应用程序，我如何加载 PostCSS 样式，使它们的行为方式与 运行 应用程序相同（这只是 import "./styles.css" in App.jsx ) ?

Answer 1

This article 回答的很清楚。 config.js 仍然存在于 Storybook v5 中，用于全局导入和配置。我只需要将 webpack 配置从 config.js 移动到 main.js 并保持导入原样。