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
                    }
                },

!!编辑 01/02/2019 !!

实际上在react-scripts版本2.1.2上，我们只有一个文件到＆＃34; dev | PROD＆＃34;命名为：_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']
    ],
}

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

1 个答案: