# CRA

### customize-cra

**npm** <https://github.com/arackaf/customize-cra>

{% tabs %}
{% tab title="Description" %}
Configuration

From here [https://github.com/storybookjs/storybook/issues/6479](https://github.com/storybookjs/storybook/issues/6479#issuecomment-589667629)
{% endtab %}

{% tab title="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.
{% endtab %}
{% endtabs %}

* [CRACO](https://github.com/gsoft-inc/craco)
* [rescripts](https://github.com/harrysolovay/rescripts)
