javascript - 删除未使用的 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 更简单。

这里的每个问题都没有公认的答案，所以我 throw 万福玛丽，希望有人能对此有一个 React/Webpack 解决方案。

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

Answer 1

if I try to override the $Card-padding variable it will also override on Login.

我不认为你应该有选择地覆盖 sass 变量。

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

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

登录.scss:

$mynewpadding: 100px;

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

忘记密码.scss:

$myothernewpadding: 30px;

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

恕我直言，上面的内容会更清晰，更容易维护。