Как импортировать файлы SCSS в компонент React только при рендеринге?

Question

У меня большой проект React.js, для которого я создал отдельные файлы SCSS для отдельных компонентов React. Проблема в том, что стили в одном компоненте, скажем, Component_1, доступны в других компонентах.

Я пытался использовать import() файлы SCSS в методах componentWillMount() Componets.

// 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

Вы можете использовать этот babel плагин для условного импорта вещей. Также в ваших функциональных компонентах вы можете использовать ловушку эффектов для замены componentWillMount / componentDidMount.

Answer 2

Я знаю, что это окажет влияние, и вам нужно будет провести рефакторинг, но styled-components ваш друг здесь.

По сути, вы добавляете стили на уровне компонентов. В сочетании с отложенной загрузкой компонентов вы загружаете свой компонент только со стилем, когда компоненты должны быть обработаны с помощью React.