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。

我目前在处理路线的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;

我的问题确实是，我可以使用React和Webpack删除未使用的CSS，还是有一种更好的CSS容纳方法，以便无法在组件外部访问它？

我觉得很多人都在做这件事，但是我似乎找不到如何做的事情。我可能错过了一个术语，该术语会导致获得正确的资源。但是我迷路了。我不是js中css的忠实拥护者，很多样式都来自另一个类似的项目，因此复制它要比为每个类和排列在js中编写css要简单得多。

这里的每个问题都没有一个可接受的答案，因此，我抛出了一个冰雹玛丽，希望有人对此有一个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;
}

forgottenpassword.scss：

$myothernewpadding: 30px;

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

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

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

1 个答案: