如何在彈出的 CRA 和 Storybook 中使用 PostCSS 插件

Question

我有一個帶有 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'),
  ]
};

Answer 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;
  },
};