将 styled-jsx 添加到弹出的 create-react-app 配置中答案

【问题标题】：Add styled-jsx to ejected create-react-app config将 styled-jsx 添加到弹出的 create-react-app 配置中
【发布时间】：2018-03-07 15:56:10
【问题描述】：

我知道将 styled-jsx 添加到普通的 create-react-app 目前是不可能的。所以我弹出了它，现在我正在尝试修改 webpack.config.dev.js 以包含它，但是对于将插件放在哪里一无所知。

谢谢:)

【问题讨论】：

标签： webpack create-react-app

【解决方案1】：

事实证明，我需要修改的只是将 plugins 数组添加到 webpack.config.dev.js（和 webpack.config.prod.js）中使用 babel 处理 JS 的部分：

// Process JS with Babel.
                {
                    test: /\.(js|jsx|mjs)$/,
                    include: paths.appSrc,
                    loader: require.resolve('babel-loader'),
                    options: {
                        // Add styled-jsx loader
                        plugins: ['styled-jsx/babel'],
                        // This is a feature of `babel-loader` for webpack (not Babel itself).
                        // It enables caching results in ./node_modules/.cache/babel-loader/
                        // directory for faster rebuilds.
                        cacheDirectory: true
                    }
                },

！！编辑于 2019 年 1 月 2 日！！

实际上在react-scripts 2.1.2 版本中，我们只有一个名为“dev | prod”的文件：_project\node_modules\react-scripts\config\webpack.config.js。

此文件有后续评论，并以 options 属性开始一个对象。

在这个 prop 中，我们有一个名为 plugins 的数组，所以我们需要在这里添加我们的插件，见下文：

// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{


    // code code code
    // code code code

    plugins: [
        [
            require.resolve('babel-plugin-named-asset-import'),
            {
                loaderMap: {
                svg: {
                    ReactComponent:
                    '@svgr/webpack?-prettier,-svgo![path]',
                },
                },
            },
        ],
        ['styled-jsx/babel']
    ],
}

【讨论】：