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

Question

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

我尝试在组件的import()方法中使用componentWillMount() 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是您的朋友。

基本上，您可以在组件级别添加样式。与延迟加载组件结合使用时，只有在用户要求时，才使用其样式加载组件。