Javascript 删除未使用的JS/CSS包代码拆分网页包

我希望我能保持简短

我发行的基本jist源于SASS进口

我有一个

App

组件来处理所有路由

导入中有一个

登录

组件。此组件中有一个a

.scss

导入

import './Login.scss';

此文件中包含各种其他

.scss

文件的导入

我的

应用程序

组件中的另一个路由是

放弃密码

组件

与

Login

类似，它有自己的

.scss

导入

现在的问题是，如果用户加载

Login

组件，这意味着所有css和导入都存储在一个css文件中，并传递到我项目中的所有其他组件

假设其中一个

.scss

导入类似于

Card

的样式

.Card

类。我有一个变量

$Card padding:15px！违约

在
ForgetPassword
中，我也有这个导入。第一个问题是，我现在有两个导入的
Card
，如果我试图覆盖
$Card padding
变量，它也将覆盖
登录

我目前在处理路线的
应用程序
组件中使用
react-loadable

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;


从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“react Loadable”导入Loadable；
导入“/App.scss”；
const Login=可加载({
加载程序：（）=>导入（'../../login/login'），
加载（）{
返回null；
}
});
常量ForgotPassword=可加载({
加载程序：（）=>导入（'../../ForgotPassword/ForgotPassword'），
加载（）{
返回null；
}
});
常量应用=（）=>{
返回(
}精确的/>
}精确的/>
);
}
导出默认应用程序；

我的问题是，我可以用React和Webpack删除未使用的CSS吗？或者有更好的CSS包含方法，这样就不能在组件之外访问它了吗

我觉得这是很多人都会做的事情，但我似乎不知道怎么做。可能有一个术语我错过了，这将导致正确的资源。但是我迷路了。我不太喜欢js中的css，很多样式都来自另一个类似的项目，所以复制它比为每个类和排列编写js要简单得多

这里的每个问题都没有一个公认的答案，所以我向大家致敬，希望有人能对此做出回应/提供一个网页解决方案

我在webpack中尝试了
ExtractTextPlugin
，但它似乎从未吐出
Login.scss
，因此我可能配置不正确。我目前正在使用
MiniCssExtractPlugin
编译我的
scss
文件

如果我试图覆盖$Card padding变量，它也会覆盖
登录时

我认为您不应该选择性地覆盖sass变量

要覆盖css属性，为什么不为该组件添加特定的css类：

// global styles
.card {
    padding: $Card-padding;
}

login.scss：

$mynewpadding: 100px;

.card.login {
    // override the default padding here
    padding: $mynewpadding;
}

forgottenpassword.scss：

$myothernewpadding: 30px;

.card.forgottenpassword {
    // overrider the default padding here
    padding: $myothernewpadding;
}

我觉得上面的内容会更清晰、更容易维护。
虽然我确实同意（可能是我的做法），但写一行
$Card padding:10px
比写
$myothernewpadding:30px；容易得多。card.forgottenspassword{padding:$myothernewpadding；}
对于使用card的所有位置，在本例中，它将出现在15个组件中的每一个组件上，在大多数组件中，它将是相同的，但不是全部，这只是针对card，而不是我们使用的其他导入。这也是我们目前在JSP项目中的工作方式，因此每个人都可以更轻松地进行转换。我不认为存在任何问题，除非您希望为每个组件编译全局css！另一个选择是在.card中添加修饰符，这样你就可以使用.card.small.card.medium和.card.large等等。我认为修饰符可能是同时要做的事情，谢谢你的帮助。我试过了，它似乎保留了
.card
类，不管我重定向到哪条路径，因为它可能在这两种情况下都被使用了？这不是我所希望的解决办法