Удалите неиспользуемые пакеты JS / CSS. - PullRequest
Новая
       27

Удалите неиспользуемые пакеты JS / CSS.

0 голосов
/ 22 марта 2019

Я надеюсь, что смогу сохранить это вкратце.

Основная проблема моей проблемы связана с импортом SASS.

У меня есть App Компонент, который обрабатывает всю маршрутизацию.

В импорте есть Login Компонент.В этом компоненте есть .scss import 

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;

Мой вопрос на самом деле: могу ли я удалить неиспользуемый CSS с помощью React и Webpack, или есть ли лучший способ сдерживания CSS, чтобы к нему нельзя было получить доступ за пределамикомпонент?

Я чувствую, что это то, что делают многие люди, но я не могу понять, как это сделать.Может быть, я пропустил термин, который привел бы к правильным ресурсам.Но я потерялся.Я не большой поклонник css в js, большая часть стилей пришла из другого похожего проекта, поэтому намного проще скопировать его, чем писать css в js для каждого класса и перестановки.

На каждый вопрос по этому вопросу здесь нет принятого ответа, поэтому я бросаю «Радуйся, Мария» в надежде, что у кого-то есть решение React / Webpack для этого.

Я пытался ExtractTextPlugin вwebpack, но он никогда не выплевывал Login.scss, поэтому я, возможно, настроил его неправильно.В настоящее время я использую MiniCssExtractPlugin для компиляции моих scss файлов.

1 Ответ

1 голос
/ 22 марта 2019

если я попытаюсь переопределить переменную $ 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;
}

imho вышеприведенное было бы намного понятнее и проще в обслуживании.

...