CRA

customize-cra

npm https://github.com/arackaf/customize-cra

Description

Configuration

From here https://github.com/storybookjs/storybook/issues/6479

Full text

Hi,

If you are using CRA and you need a custom config (like a babel plugin) you can use react-app-rewired with customize-cra.

Here's how you can add the emotion css props plugin to both CRA + Storybook.

(This is useful for Emotion because the babel macro can't setup the emotion css pragma, so really the babel plugin is required)

Step 1

Add customize CRA + React-app-rewired

yarn add customize-cra react-app-rewired --dev

  /* ./package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

Step 2: customize the CRA config:

/* ./config-overrides.js */

const {
  override,
  addBabelPreset
} = require("customize-cra");
const path = require("path");

module.exports = override(
  addBabelPreset("@emotion/babel-preset-css-prop")
);

Step 3: customize the Storybook config:

Note, you can keep using the CRA storybook preset

/* ./storybook/webpack.config.js */

module.exports = ({ config }) => {
  return require("../config-overrides")(config);
};

This way you don't have to duplicate the config overrides, and can use the same overrides for both CRA and Storybook to keep them in sync.

• CRACO

• rescripts