仅在渲染时如何在 React 组件中导入 SCSS 文件？

Question

我有一个大型 React.js 项目，为此我为单独的 React 组件创建了单独的 SCSS 文件。问题是一个组件中的样式，比如 Component_1，在其他组件中可用。

我尝试在组件的componentWillMount() 方法中使用import() SCSS 文件。

// instead of this
import "../Styles/_header.scss";

class Header extends React.Component {
  // I am trying this
  componentWillMount() {
    import ("../Styles/_header.scss");
  }
}

但是我有很多功能组件，为此我正在搜索 Webpack 方式或任何其他方式，因此我的 SCSS 文件将仅在我从中导入的组件中可用...谢谢

Answer 1

我知道它会产生影响，你需要重构，但 styled-components 是你的朋友。

基本上，您在组件级别添加样式。结合延迟加载组件，您仅在组件需要由 React 渲染时加载组件及其样式。

Answer 2

您可以使用此babel plugin 有条件地导入内容。同样在您的功能组件中，您可以使用effect hook 替换componentWillMount/componentDidMount。