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 in js 的解决方案！

看看这个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包含在相关组件中！

仅在加载组件时才在样式表中进行加载

2 个答案: