css - 编译 SCSS 生成超过 3 MB 的 CSS 文件

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 支持，试试你是否可以升级而不是弹出。