Удалить неиспользуемые пакеты JS/CSS Code Splitting Webpack

Я надеюсь, что смогу быть кратким.

Основная суть моей проблемы связана с импортом SASS.

У меня есть компонент App, который обрабатывает всю маршрутизацию.

В импорте есть Login Компонент. В этом компоненте есть импорт .scss

import './Login.scss';

В этом файле импорт различных других .scss файлов.

Другой маршрут в моем компоненте App — это компонент ForgotPassword.

Подобно Login, он имеет собственный импорт .scss.

Теперь проблема в том, что если пользователь загружает компонент Login, это означает, что все css и импорты хранятся в файле css и переносятся на все остальные компоненты в моем проекте.

Допустим, один из .scss импортов был чем-то вроде Card какие стили .Card классов. у меня есть переменная

$Card-padding: 15px !default;

В ForgetPassword у меня тоже есть этот импорт. Первая проблема заключается в том, что теперь у меня есть два импорта Card, и если я попытаюсь переопределить переменную $Card-padding, она также переопределит Login.

В настоящее время я использую react-loadable в своем компоненте App, где я обрабатываю свои маршруты.

import React from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';

const Login = Loadable({
   loader: () => import('../../login/Login'),
   loading() {
      return null;
   }
});

const ForgotPassword = Loadable({
   loader: () => import('../../forgot-password/ForgotPassword'),
   loading() {
      return null;
   }
});

const App = () => {

   return (
      <div className = "App">
         <Router>
            <div className = "App-container">
            <Switch>
               <Route path = "/login" component = {() => <Login />} exact />
               <Route path = "/forgotpassword" component = {() => <ForgotPassword />} exact />
            </Switch>
            </div>
         </Router>
      </div>
   );

}

export default App;

Мой вопрос действительно заключается в том, могу ли я удалить неиспользуемый CSS с помощью React и Webpack, или есть лучший метод сдерживания CSS, чтобы к нему нельзя было получить доступ за пределами компонента?

Я чувствую, что это то, что делают многие люди, но я не могу понять, как это сделать. Возможно, я пропустил термин, который привел бы к правильным ресурсам. Но я потерян. Я не большой поклонник css в js, многие стили взяты из другого проекта, который похож, поэтому гораздо проще скопировать его, чем писать css в js для каждого класса и перестановки.

На каждый вопрос по этому поводу здесь нет принятого ответа, поэтому я бросаю «Радуйся, Мария» в надежде, что у кого-то есть решение для этого React/Webpack.

Я пробовал ExtractTextPlugin в веб-пакете, но он никогда не выдавал Login.scss, поэтому, возможно, я неправильно его настроил. В настоящее время я использую MiniCssExtractPlugin для компиляции моих scss файлов.