如何在弹出的 CRA 和 Storybook 中使用 PostCSS 插件答案

【问题标题】：How to use PostCSS plugins with ejected CRA and Storybook如何在弹出的 CRA 和 Storybook 中使用 PostCSS 插件
【发布时间】：2021-01-26 21:18:09
【问题描述】：

我有一个弹出的带有 Storybook 的 create-react-app。为了使用一些额外的 PostCSS 插件，我添加了 postcss-nested，当我启动/构建 cra 项目时一切正常，但它不适用于 Storybook。看起来 Storybook 忽略了 PostCSS 并将所有内容编译为简单的 css。

我已经尝试重写它，但它不起作用。

如果你能帮助我，我将不胜感激。

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.module\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['postcss-nested'],
            },
          },
        },
      ],
      include: __dirname,
    });

    config.resolve.modules.push(process.cwd() + '/node_modules');
    config.resolve.modules.push(process.cwd() + '/src');
    config.resolve.symlinks = false;

    return config;
  },
};

我尝试创建一个单独的文件

module.exports = {
  plugins: [
    require('postcss-nested'),
  ]
};

【问题讨论】：

标签： reactjs create-react-app storybook postcss

【解决方案1】：

看起来它正在工作

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          // ident: 'postcss',
          options: {
            ident: 'postcss',
            plugins: [require('postcss-nested')],
          },
        },
      ],
      include: __dirname,
    });
    config.resolve.modules.push(process.cwd() + '/node_modules');
    config.resolve.modules.push(process.cwd() + '/src');
    config.resolve.symlinks = false;

    return config;
  },
};

【讨论】：