У меня есть приложение реакции (использующее приложение create-реагировать).Я хотел добавить SCSS в свой проект, поэтому я извлек его из готовых конфигурационных файлов.
Проблема, с которой я здесь сталкиваюсь, заключается в том, что после того, как я запустил мою сборку (для prod), она скомпилировала все до 3,3 МБ.Обычно CSS не более 300 КБ.Я был очень удивлен этим.
Не уверен, что лучше всего сделать здесь, чтобы предоставить вам более подробную информацию.Я могу показать вам файлы, которые я импортирую, в моем главном файле SCSS.
/*Direction */
// Override default value for $dir in directional
$dir: ltr;
// Import helpers from directional
@import "../base/directional";
@import "../base/variables";
// Import helpers from bootestrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
//@import "bootstrap/code";
@import "bootstrap/grid";
//@import "bootstrap/tables";
@import "bootstrap/forms";
//@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/input-group";
@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
//@import "bootstrap/breadcrumb";
//@import "bootstrap/pagination";
//@import "bootstrap/badge";
//@import "bootstrap/jumbotron";
//@import "bootstrap/alert";
//@import "bootstrap/progress";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/close";
@import "bootstrap/modal";
//@import "bootstrap/tooltip";
//@import "bootstrap/popover";
@import "bootstrap/carousel";
@import "bootstrap/utilities";
//@import "bootstrap/print";
//select2-develop
@import "../select2-develop/core";
/* slick slider component*/
@import "../modules/slick";
/* BASE - Base styles , variables, mixins, etc*/
@import "../base/mixins";
@import "../base/normalize";
@import "../base/base";
/*MODULES - Individual site components */
@import "../modules/typography";
@import "../modules/blocks";
@import "../modules/buttons";
@import "../modules/checkbox";
@import "../modules/list-group";
@import "../modules/components";
@import "../modules/select";
@import "../modules/sections";
@import "../modules/title";
@import "../modules/dialog";
@import "../modules/social-media";
@import "../modules/renderField";
@import "../modules/selectInput";
@import "../modules/renderFileInput";
@import "../modules/number_picker";
@import "../modules/product_grid_view";
@import "../modules/product_list_view";
@import "../modules/customer_service";
@import "../modules/render_products";
@import "../modules/_scroll_to_top";
/* LAYOUTS - page layout styles */
@import "../layouts/nav";
@import "../layouts/header";
@import "../layouts/manual-form";
@import "../layouts/home-details";
@import "../layouts/products";
@import "../layouts/product";
@import "../layouts/apps-link";
@import "../layouts/authentication/login";
@import "../layouts/authentication/signup";
@import "../layouts/tyres/tyres";
@import "../layouts/category/motor-oil";
@import "../layouts/tyres/tyres-search";
@import "../layouts/vehicles/vehicles";
@import "../layouts/setting/wish-list";
@import "../layouts/setting/setting";
@import "../layouts/garage-popup";
@import "../state/checkout/cart";
@import "../state/checkout/order_summary.scss";
@import "../layouts/quotation-request";
@import "../layouts/send-request";
@import "../layouts/search_result";
@import "../layouts/authentication/forgot-password";
@import "../layouts/authentication/confirm-signup";
@import "../layouts/authentication/email-verification";
@import "../layouts/footer";
@import "../layouts/setting/profile";
@import "../layouts/setting/reset-password";
@import "../layouts/setting/garage";
@import "../layouts/setting/orders";
@import "../layouts/setting/payment";
@import "../layouts/setting/addresses";
Если важна и настройка моего веб-пакета, я тоже могу это предоставить.Большое спасибо за ваше время, я ценю это.
Обновление
Вот что я говорю о том, что он создает после запуска npm run build:
Обновление 2
Проблема, с которой я столкнулся, заключалась в том, что SCSS создавал так много вложений для простых вещей.Как будто было более 50 строк вложенности только для того, чтобы добавить простой отступ.Вот что я имею в виду:
.form-control-plaintext.form-control-sm, .input-group-sm > .form-control-plaintext.form-control,
.input-group-sm > .input-group-prepend > .form-control-plaintext.input-group-text,
.input-group-sm > .input-group-append > .form-control-plaintext.input-group-text,
.input-group-sm > .input-group-prepend > .form-control-plaintext.btn,
#mobile-header-details .dropdown-header .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-primary,
#mobile-header-details .dropdown-header #footer .list-unstyled a .input-group-sm > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-sm > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header #mobile-footer .list-unstyled a .input-group-sm > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-sm > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-facebook,
#mobile-header-details .dropdown-header .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-google,
#mobile-header-details .dropdown-header .product-buttons .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-detail,
.product-buttons #mobile-header-details .dropdown-header .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-detail,
#mobile-header-details .dropdown-header .product-buttons .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-cart,
.product-buttons #mobile-header-details .dropdown-header .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-cart,
.input-group-sm > .input-group-prepend > .form-control-plaintext.btn-secondary,
#custom-details .custom-container .parts-container .number-picker-container #number-picker .input-group-sm > .input-group-prepend > input.form-control-plaintext,
#number-picker .input-group-sm > .input-group-prepend > input.form-control-plaintext,
#number-picker .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-negative,
#number-picker .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-positive,
.input-group-sm > .input-group-prepend > .form-control-plaintext.btn-gray-secondary,
#cart .input-group-sm > .input-group-prepend > .form-control-plaintext.back-shop,
.input-group-sm > .input-group-prepend > .form-control-plaintext.btn-gray,
.quantity .input-group-sm > .input-group-prepend > button.form-control-plaintext,
.input-group-sm > .input-group-prepend > .form-control-plaintext.btn-primary,
#footer .list-unstyled a .input-group-sm > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a .input-group-sm > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#login .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-signin,
.product-buttons .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-cart,
.product-buttons .input-group-sm > .input-group-prepend > .form-control-plaintext.btn-detail,
.input-group-sm > .input-group-prepend > .form-control-plaintext.btn-google,
.input-group-sm > .input-group-prepend > .form-control-plaintext.btn-facebook,
.input-group-sm > .input-group-append > .form-control-plaintext.btn,
#mobile-header-details .dropdown-header .input-group-sm > .input-group-append > .form-control-plaintext.btn-primary,
#mobile-header-details .dropdown-header #footer .list-unstyled a .input-group-sm > .input-group-append > i.form-control-plaintext[class*=icon-],
#footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-sm > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header #mobile-footer .list-unstyled a .input-group-sm > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-sm > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header .input-group-sm > .input-group-append > .form-control-plaintext.btn-facebook,
#mobile-header-details .dropdown-header .input-group-sm > .input-group-append > .form-control-plaintext.btn-google,
#mobile-header-details .dropdown-header .product-buttons .input-group-sm > .input-group-append > .form-control-plaintext.btn-detail,
.product-buttons #mobile-header-details .dropdown-header .input-group-sm > .input-group-append > .form-control-plaintext.btn-detail,
#mobile-header-details .dropdown-header .product-buttons .input-group-sm > .input-group-append > .form-control-plaintext.btn-cart,
.product-buttons #mobile-header-details .dropdown-header .input-group-sm > .input-group-append > .form-control-plaintext.btn-cart,
.input-group-sm > .input-group-append > .form-control-plaintext.btn-secondary,
#custom-details .custom-container .parts-container .number-picker-container #number-picker .input-group-sm > .input-group-append > input.form-control-plaintext,
#number-picker .input-group-sm > .input-group-append > input.form-control-plaintext,
#number-picker .input-group-sm > .input-group-append > .form-control-plaintext.btn-negative,
#number-picker .input-group-sm > .input-group-append > .form-control-plaintext.btn-positive,
.input-group-sm > .input-group-append > .form-control-plaintext.btn-gray-secondary,
#cart .input-group-sm > .input-group-append > .form-control-plaintext.back-shop,
.input-group-sm > .input-group-append > .form-control-plaintext.btn-gray,
.quantity .input-group-sm > .input-group-append > button.form-control-plaintext,
.input-group-sm > .input-group-append > .form-control-plaintext.btn-primary,
#footer .list-unstyled a .input-group-sm > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a .input-group-sm > .input-group-append > i.form-control-plaintext[class*=icon-],
#login .input-group-sm > .input-group-append > .form-control-plaintext.btn-signin,
.product-buttons .input-group-sm > .input-group-append > .form-control-plaintext.btn-cart,
.product-buttons .input-group-sm > .input-group-append > .form-control-plaintext.btn-detail,
.input-group-sm > .input-group-append > .form-control-plaintext.btn-google,
.input-group-sm > .input-group-append > .form-control-plaintext.btn-facebook, .form-control-plaintext.form-control-lg, .input-group-lg > .form-control-plaintext.form-control,
.input-group-lg > .input-group-prepend > .form-control-plaintext.input-group-text,
.input-group-lg > .input-group-append > .form-control-plaintext.input-group-text,
.input-group-lg > .input-group-prepend > .form-control-plaintext.btn,
#mobile-header-details .dropdown-header .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-primary,
#mobile-header-details .dropdown-header #footer .list-unstyled a .input-group-lg > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-lg > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header #mobile-footer .list-unstyled a .input-group-lg > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-lg > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-facebook,
#mobile-header-details .dropdown-header .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-google,
#mobile-header-details .dropdown-header .product-buttons .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-detail,
.product-buttons #mobile-header-details .dropdown-header .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-detail,
#mobile-header-details .dropdown-header .product-buttons .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-cart,
.product-buttons #mobile-header-details .dropdown-header .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-cart,
.input-group-lg > .input-group-prepend > .form-control-plaintext.btn-secondary,
#custom-details .custom-container .parts-container .number-picker-container #number-picker .input-group-lg > .input-group-prepend > input.form-control-plaintext,
#number-picker .input-group-lg > .input-group-prepend > input.form-control-plaintext,
#number-picker .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-negative,
#number-picker .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-positive,
.input-group-lg > .input-group-prepend > .form-control-plaintext.btn-gray-secondary,
#cart .input-group-lg > .input-group-prepend > .form-control-plaintext.back-shop,
.input-group-lg > .input-group-prepend > .form-control-plaintext.btn-gray,
.quantity .input-group-lg > .input-group-prepend > button.form-control-plaintext,
.input-group-lg > .input-group-prepend > .form-control-plaintext.btn-primary,
#footer .list-unstyled a .input-group-lg > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a .input-group-lg > .input-group-prepend > i.form-control-plaintext[class*=icon-],
#login .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-signin,
.product-buttons .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-cart,
.product-buttons .input-group-lg > .input-group-prepend > .form-control-plaintext.btn-detail,
.input-group-lg > .input-group-prepend > .form-control-plaintext.btn-google,
.input-group-lg > .input-group-prepend > .form-control-plaintext.btn-facebook,
.input-group-lg > .input-group-append > .form-control-plaintext.btn,
#mobile-header-details .dropdown-header .input-group-lg > .input-group-append > .form-control-plaintext.btn-primary,
#mobile-header-details .dropdown-header #footer .list-unstyled a .input-group-lg > .input-group-append > i.form-control-plaintext[class*=icon-],
#footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-lg > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header #mobile-footer .list-unstyled a .input-group-lg > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a #mobile-header-details .dropdown-header .input-group-lg > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-header-details .dropdown-header .input-group-lg > .input-group-append > .form-control-plaintext.btn-facebook,
#mobile-header-details .dropdown-header .input-group-lg > .input-group-append > .form-control-plaintext.btn-google,
#mobile-header-details .dropdown-header .product-buttons .input-group-lg > .input-group-append > .form-control-plaintext.btn-detail,
.product-buttons #mobile-header-details .dropdown-header .input-group-lg > .input-group-append > .form-control-plaintext.btn-detail,
#mobile-header-details .dropdown-header .product-buttons .input-group-lg > .input-group-append > .form-control-plaintext.btn-cart,
.product-buttons #mobile-header-details .dropdown-header .input-group-lg > .input-group-append > .form-control-plaintext.btn-cart,
.input-group-lg > .input-group-append > .form-control-plaintext.btn-secondary,
#custom-details .custom-container .parts-container .number-picker-container #number-picker .input-group-lg > .input-group-append > input.form-control-plaintext,
#number-picker .input-group-lg > .input-group-append > input.form-control-plaintext,
#number-picker .input-group-lg > .input-group-append > .form-control-plaintext.btn-negative,
#number-picker .input-group-lg > .input-group-append > .form-control-plaintext.btn-positive,
.input-group-lg > .input-group-append > .form-control-plaintext.btn-gray-secondary,
#cart .input-group-lg > .input-group-append > .form-control-plaintext.back-shop,
.input-group-lg > .input-group-append > .form-control-plaintext.btn-gray,
.quantity .input-group-lg > .input-group-append > button.form-control-plaintext,
.input-group-lg > .input-group-append > .form-control-plaintext.btn-primary,
#footer .list-unstyled a .input-group-lg > .input-group-append > i.form-control-plaintext[class*=icon-],
#mobile-footer .list-unstyled a .input-group-lg > .input-group-append > i.form-control-plaintext[class*=icon-],
#login .input-group-lg > .input-group-append > .form-control-plaintext.btn-signin,
.product-buttons .input-group-lg > .input-group-append > .form-control-plaintext.btn-cart,
.product-buttons .input-group-lg > .input-group-append > .form-control-plaintext.btn-detail,
.input-group-lg > .input-group-append > .form-control-plaintext.btn-google,
.input-group-lg > .input-group-append > .form-control-plaintext.btn-facebook {
padding-right: 0;
padding-left: 0;
}