webpack - 将 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 属性开始一个对象。

在这个 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']
    ],
}