删除未使用的 JS/CSS 包 代码拆分 Webpack

Question

我希望我能保持简短。

我的问题的基本要点源于 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。

我目前在处理路线的App 组件中使用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 和 Webpack 删除未使用的 CSS，还是有更好的 css 包含方法，使其无法在组件外部访问？

我觉得这是很多人都会做的事情，但我似乎不知道该怎么做。我可能错过了一个术语，它会导致正确的资源。但我迷路了。我不是 js 中的 css 的忠实粉丝，很多样式都来自另一个类似的项目，因此复制它要简单得多，而不是必须为每个类和排列编写 js 中的 css。

这里关于这个的每个问题都没有一个可接受的答案，所以我抛出一个 Hail Mary 希望有人对此有 React/Webpack 解决方案。

我在 webpack 中尝试过ExtractTextPlugin，但它似乎从来没有吐出Login.scss，所以我可能配置不正确。我目前正在使用MiniCssExtractPlugin 编译我的scss 文件。

Answer 1

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

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

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

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

login.scss：

$mynewpadding: 100px;

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

忘记密码.scss：

$myothernewpadding: 30px;

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

恕我直言，以上内容会更清晰，更容易维护..