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

Question

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

谢谢:)

Answer 1

原来我需要修改的只是将插件数组添加到 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
                    }
                },

!! Edited on 01/02/2019 !!

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

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

在这个道具中，我们有一个名为 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']
    ],
}

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

Add styled-jsx to ejected create-react-app config

webpack

create-react-app