使用 Storybook 5 导入全局 PostCSS答案

【问题标题】：Import global PostCSS with Storybook 5使用 Storybook 5 导入全局 PostCSS
【发布时间】：2020-02-08 09:29:55
【问题描述】：

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

首先，我在./.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, '../'),
    });

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

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

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

【问题讨论】：

标签： reactjs postcss storybook

【解决方案1】：

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

【讨论】：