编译SCS可以生成超过3MB的CSS文件_Css_Reactjs_Webpack_Sass

编译SCS可以生成超过3MB的CSS文件

css reactjs webpack sass

编译SCS可以生成超过3MB的CSS文件,css,reactjs,webpack,sass,Css,Reactjs,Webpack,Sass,我有一个react应用程序（使用创建react应用程序）。我想将SCS添加到我的项目中，所以我从预构建的配置文件中弹出我在这里面临的问题是，在我运行构建（prod）之后，它将所有内容编译到3.3MB。通常，CSS不超过300KB。我对此感到非常惊讶不确定在这里做什么才能为您提供更多细节。我可以在我的主SCSS文件中向您显示我正在导入的文件 /*Direction */ // Override default value for $dir in directional $dir: ltr;

我有一个react应用程序（使用创建react应用程序）。我想将SCS添加到我的项目中，所以我从预构建的配置文件中弹出

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

不确定在这里做什么才能为您提供更多细节。我可以在我的主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运行构建后创建了什么：

更新2

我遇到的问题是，SCS为简单的事情创建了如此多的嵌套。就像有超过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;
}

我认为这里的问题是，您正在导入所有内容，包括通用CSS、特定于功能的CSS、图像和字体，即使在初始加载时并非所有内容都是必需的

这将创建一个巨大的JS包，其中包括所有 CSS、图像和字体（这就是为什么您的捆绑包大小为3mb，请尝试使用

warn build

构建生产版本，然后再次检查大小）

将特定于功能的CSS移动到其各自的JSX文件中，并使用动态导入延迟加载JS包。这将大大优化捆绑包的大小

另外，

create react app v2

具有

SCSS

支持，如果您可以升级而不是弹出，请尝试。

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

这将创建一个巨大的JS包，其中包括所有 CSS、图像和字体（这就是为什么您的捆绑包大小为3mb，请尝试使用

warn build

构建生产版本，然后再次检查大小）

将特定于功能的CSS移动到其各自的JSX文件中，并使用动态导入延迟加载JS包。这将大大优化捆绑包的大小

另外

create react app v2

具有

SCSS

支持，如果您可以升级而不是弹出，请尝试。

感谢您的回复。我再也无法撤消弹出。如果我回到以前的版本，有太多的东西我必须重做。我想你误解我了。我的意思是，在运行

npm run build

之后创建的CSS文件本身是3MB（main.CSS）。它应该有那么大吗？我附上了一张我正在谈论的图片。再次感谢您打开css文件并检查内联base64编码的图像和字体？这可能是尺寸问题的原因。您可以使用webpack

文件加载器将它们提取为单独的资产。我发现了问题所在。我现在就发布我的答案。非常感谢您的帮助，我刚刚删除了项目中的所有扩展。现在一切都很顺利，它甚至将其编译到16kbxd。我只是想复制过去的CSS，而不是从Bootstrap扩展感谢您的回复。我再也无法撤消弹出。如果我回到以前的版本，有太多的东西我必须重做。我想你误解我了。我的意思是，在运行npm run build
之后创建的CSS文件本身是3MB（main.CSS）。它应该有那么大吗？我附上了一张我正在谈论的图片。再次感谢您打开css文件并检查内联base64编码的图像和字体？这可能是尺寸问题的原因。您可以使用webpack文件加载器将它们提取为单独的资产。我发现了问题所在。我现在就发布我的答案。非常感谢您的帮助，我刚刚删除了项目中的所有扩展。现在一切都很顺利，它甚至将其编译到16kbxd。我只是复制过去的CSS，而不是从引导扩展