Реагировать на загрузку в таблице стилей только при загрузке компонента

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

В этом файле я делаю импорт определенных других файлов scss, связанных с Login Component. Скажем, например, у меня был один, который стилизовал класс под названием .Tabs

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

$Tabs-padding: 15px;

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

.Login {....

Теперь, например, если в компоненте ForgotPassword, если бы я добавил div с className из Tabs, он бы тогда правильно его стилизовал. Это не то, что я хочу, это означает, что все, что импортируется в компоненте Login, загружается по всему проекту, что означает, что я не могу переопределить любые переменные SASS без необходимости снова импортировать тот же файл SASS и сделать пакет css в веб-пакете файл больше, чем нужно.

Наверное, мой вопрос: как мне содержать Login.scss для импорта только тогда, когда компонент Login действительно рендерится?

Или я неправильно прохожу весь импорт?

Answer 1

Что вы должны понимать, это когда вы импортируете свои файлы scss.Они конвертируются в CSS и отображаются в приложении как «внутренние стили».В основном они становятся глобальными CSS, отображаемыми в заголовке.Поэтому, если вы не используете scss должным образом и не структурируете свой css с иерархией, вы не сможете добиться сдерживания!

Но на что вы наткнулись - это интригующая идея, которая подтолкнула сообщество к поиску решения под названием css in js !

Посмотрите на это видео !

Основная идея состоит в том, чтобы ввести CSS в React Component , содержащий стили внутри компонента .Это достигается с помощью шаблонных строк.Это потрясающе, потому что вы теперь понимаете всю мощь javascript для манипулирования css!

Этот представляет собой исчерпывающий список фреймворков, которые могут помочь вам в этом. 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 соответствовал соответствующему компоненту!

Answer 2

Вам нужно объединить все ваши файлы scss в один файл.Вы можете сделать это в конфигурационном файле веб-пакета с использованием ExtractTextPlugin

 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"
    })
  ]