Question

我有一个React应用（使用create-react-app）。我想将SCSS添加到我的项目中，以便从预构建的配置文件中弹出。

我在这里面临的问题是，在运行构建（针对产品）后，它会将所有内容编译为3.3 MB。通常，CSS不超过300 KB。我对此感到非常惊讶。

不确定什么是最好的做法，以为您提供更多详细信息。我可以在我的主要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";

如果我的webpack设置也很重要，我也可以提供。非常感谢您的宝贵时间。

更新

这是我在谈论它在运行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;
}

Answer 1

我认为这里的问题是，您要在单个文件中导入所有内容，包括通用CSS，特定于功能的CSS，图像和字体，即使在初始加载时并不需要全部。

这会创建一个巨大的JS包，其中包括所有 CSS，图像和字体（这就是为什么捆绑包大小为3mb的原因，请尝试使用yarn build构建生产版本并再次检查大小）。

将功能特定的CSS移至其各自的JSX文件，并使用动态导入来延迟加载JS捆绑包。这应该可以极大地优化捆绑包的大小。

另外create-react-app v2也有SCSS支持，请尝试是否可以升级而不是弹出。

编译SCSS会生成3 MB以上的CSS文件

1 个答案: