仅在加载Component时才在样式表中重新加载

Question

我有一个App组件，它为我的项目执行所有路由，在那里我导入所有必要的组件。

import React from "react";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.scss';
import Login from "../../login/Login";
import Overview from "../../overview/Overview";
import SubNav from "../../subnav/SubNav";
import ForgotPassword from "../../forgot-password/ForgotPassword";

const App = () => {

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

}

export default App;

例如，在我的Login组件中，我有以下导入...

import React from 'react';
import './Login.scss';
import LoginBenefits from './LoginBenefits';
import LoginFormContainer from './LoginFormContainer';

我在这里与Login.scss的进口问题

在这个文件中，我导入了与Login组件相关的特定其他scss文件。比方说，我有一个称为.Tabs的类

@import "../../scss/_variables";

$Tabs-padding: 15px;

@import "../tabs/Tabs.scss";

.Login {....

现在，例如，如果在ForgotPassword组件中，如果我要添加一个className的Tabs的div，那么它将正确地设置它。这不是我想要的，这意味着在Login组件中导入的任何内容都会在整个项目中加载，这意味着我无法覆盖任何SASS变量而无需再次导入相同的SASS文件并使webpack捆绑的css文件更大比它需要的。

我想我的问题是，如何在Login.scss组件实际渲染时只包含Login？

或者我是以错误的方式进行整个进口？

Answer 1

您需要将所有scss文件捆绑到单个文件中。您可以使用ExtractTextPlugin在webpack配置文件中执行此操作

 module: {
    rules: [{
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ['css-loader', 'sass-loader']
        }),
      },
      {
        test: /js$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "dist/assets/css/style.bundle.css"
    })
  ]

Answer 2

您需要了解的是，导入scss文件时。它们被转换为css并在应用程序中呈现为“内部样式”。基本上它们成为标题中呈现的全局css。因此，除非您正确使用scss并使用层次结构构建css，否则无法实现遏制！

但你偶然发现的是一个有趣的想法，这促使社区提出了一个名为css的解决方案！

看看这个video！

基本思想是将css引入包含组件内部样式的React组件。它是使用模板字符串实现的。这是开创性的，因为你现在如何充分利用你的javascript来操纵css！

This是一个详尽的框架列表，可以帮助您解决这个问题。 styled-components是最广泛采用的框架。但是你可以选择！

这是代码外观的一个示例

import React from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';

const Container = styled.div`
  text-align: center;
`;

const Button = styled.button`
  background-color: #ff0000;
  width: 320px;
  padding: 20px;
  border-radius: 5px;
  border: none;
  outline: none;
  &:hover {
    color: #fff;
  }
  &:active {
    position: relative;
    top: 2px;
  }
  @media (max-width: 480px) {
    width: 160px;
  }
`;

const App = () => (
  <Container>
    <Button>Click me!</Button>
  </Container>
);

render(<App />, document.getElementById('content'));

风格的组件负责将css包含在相关组件中！