0

我正在使用create-react-app. 我想避免不得不弹出 webpack 配置，但我想更好地控制我的类的生成方式。

我目前正在使用react-app-rewired并react-app-rewire-styled-components尝试自定义我的样式组件类的编译方式。

根据文档，这应该可以通过设置namespace

这是我的config-overrides.js：

const rewireStyledComponents = require('react-app-rewire-styled-components');

module.exports = function override(config, env) {

    config = rewireStyledComponents(config, env, {
        "displayName": false,
        "namespace": "my-app"
    });

    return config;
}

现在有了这个配置，我希望我以前生成的类hfil7l-0 lmhJTL现在生成为my-app-hfil7l-0 lmhJTL. 但是，这似乎不起作用。

我想namespace专门使用，因为displayName并且fileName给我的控制权太少。我在同一页面上加载了多个应用程序，并且一些共享组件是扩展的styled-components，因此我必须确保我可以使每个应用程序的所有类都是唯一的。

我在这里想念什么？

4

1 回答 1

0

您可以尝试customize-cra从 CRA 扩展一些配置。

// 配置覆盖.js

const { alias, configPaths } = require('react-app-rewire-alias');
const { override, addBabelPlugin } = require('customize-cra');

module.exports = override((config, env) => {
  let isDev = env === 'development';

  // some my alias
  alias({
    ...configPaths('tsconfig.base.json'),
  })(config);

  // It work only dev
  if (isDev) {
    addBabelPlugin([
      'babel-plugin-styled-components',
      {
        displayName: true,
      },
    ])(config);
  }

  return config;
});
于 2021-03-02T04:28:19.273 回答