时间戳

首页 > 解决方案 > 如何在弹出的 CRA 和 Storybook 中使用 PostCSS 插件

reactjs - 如何在弹出的 CRA 和 Storybook 中使用 PostCSS 插件

问题描述

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

标签： reactjscreate-react-appstorybookpostcss

解决方案

看起来它正在工作

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

推荐阅读