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

Question

I have a large React.js project, for which I have created separate SCSS files for separate React Components. The problem is styles in one component, let's say Component_1, are available in other components.

I have tried using import() the SCSS files within the Componets' componentWillMount() methods.

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

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

But I have many functional components, and for that I am seaching an Webpack way or any other way, so that my SCSS files will be only available in the Components from which I am importing... Thanks

Answer 1

I know it will have impact and you will need to refactor, but styled-components is your friend here.

Basically, you add styling on component level. In combination with lazy loading components you only load your component with its styling when the components need to be rendered by React.

Answer 2

You can use this babel plugin to conditionally import things. Also in your functional components you can use the effect hook to replace componentWillMount/componentDidMount.