Question

我正在尝试在我的rollup.config.js中添加样式组件作为下面的复制，但它会引发错误。我对react-router-dom有类似的问题，并通过在react-router-dom的外部将react-router-dom/Link重命名为rollup.config.js来解决此问题。

如何处理styled-components？

繁殖：

// rollup.config.js
export default {
  ...
  external: ['react', 'react-router-dom/Link', 'styled-components'],
  ...
  globals: { react: 'React', 'react-router-dom/Link': 'Link', 'styled-
  components: 'styled' },
};

实际行为：使用汇总构建时抛出错误

(babel plugin) An unexpected situation arose. Please raise an issue at 
https://github.com/rollup/rollup-plugin-babel/issues. Thanks!
node_modules/styled-components/dist/styled-components.es.js

版本样式 - 组件： 2.0.1

版本汇总 - 插件 - 巴贝尔： 2.7.1

Answer 1

最后，我在rollup.config.js

中解决了这个问题

export default {
  ...
  external: ['styled-components'],
  ...
  globals: { 'styled-components': 'styled' },
};

这取决于我们如何导入包，在我的情况下，我将其导入我的文件中：

import styled from 'styled-components';

如何将样式组件添加为外部用于汇总构建？

1 个答案: