- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个 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;
}
最佳答案
我认为这里的问题是您在单个文件中导入了所有内容,包括通用 CSS、特定于功能的 CSS、图像和字体,即使在初始加载时并非所有这些都是必需的。
这会创建一个巨大的 JS 包,其中包括所有CSS、图像和字体(这就是为什么您的包大小为 3mb,请尝试使用 yarn build
构建生产版本并再次检查大小)。
将功能特定的 CSS 移动到其各自的 JSX 文件中,并使用动态导入延迟加载 JS 包。这应该可以大大优化包的大小。
另外 create-react-app v2
有 SCSS
支持,试试你是否可以升级而不是弹出。
关于css - 编译 SCSS 生成超过 3 MB 的 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54290099/
我正在尝试使用以下 keytool 命令为我的应用程序生成 keystore : keytool -genkey -alias tomcat -keystore tomcat.keystore -ke
编辑:在西里尔正确解决问题后,我注意到只需将生成轴的函数放在用于生成标签的函数下面就可以解决问题。 我几乎读完了 O'Reilly 书中关于 D3.js 的教程,并在倒数第二页上制作了散点图,但是当添
虽然使用 GraphiQL 效果很好,但我的老板要求我实现一个用户界面,用户可以在其中通过 UI 元素(例如复选框、映射关系)检查呈现给他们的元素并获取数据,这样做将为该人生成 graphql 输入,
我尝试在 Netbean 6.8 中使用 ws-import 生成 Java 类。我想重新生成 jax-ws,因为在 ebay.api.paypalapi 包中发现了一个错误(我认为该错误是由于 Pa
我有一个 perl 脚本,它获取系统日期并将该日期写入文件名。 系统日期被分配给 TRH1 变量,然后它被设置为一个文件名。 $TRH1 =`date + %Y%m%d%H%M`; print "TR
我是 Haskell 的新手,需要帮助。我正在尝试构建一种必须具有某种唯一性的新数据类型,因此我决定使用 UUID 作为唯一标识符: data MyType = MyType { uuid ::
我制作了一个脚本,它可以根据 Mysql 数据库中的一些表生成 XML。 该脚本在 PHP 中运行。 public function getRawMaterials($apiKey, $format
所以这是我的项目中的一个问题。 In this task, we will use OpenSSL to generate digital signatures. Please prepare a f
我在 SAS LIFEREG 中有一个加速故障时间模型,我想绘制它。因为 SAS 在绘图方面非常糟糕,我想实际重新生成 R 中曲线的数据并将它们绘制在那里。 SAS 提出了一个尺度(在指数分布固定为
我正在为 Django 后端制作一个样板,并且我需要能够使它到达下一个下载它的人显然无法访问我的 secret key 的地方,或者拥有不同的 key 。我一直在研究一些选项,并在这个过程中进行了实验
我正在创建一个生成采购订单的应用程序。我可以根据用户输入的详细信息创建文本文件。我想生成一个看起来比普通文本文件好得多的 Excel。有没有可以在我的应用程序中使用的开源库? 最佳答案 目前还没有任何
我正在尝试使用 ScalaCheck 为 BST 创建一个 Gen,但是当我调用 .sample 方法时,它给了我 java.lang.NullPointerException。我哪里错了? seal
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我尝试编写一些代码,例如(在verilog中): parameter N = 128; if (encoder_in[0] == 1) begin 23 binary_out = 1;
我正忙于在 Grails 项目中进行从 MySQL 到 Postgres 的相当复杂的数据迁移。 我正在使用 GORM 在 PostGres 中生成模式,然后执行 MySQL -> mysqldump
如何使用纯 XSLT 生成 UUID?基本上是寻找一种使用 XSLT 创建独特序列的方法。该序列可以是任意长度。 我正在使用 XSLT 2.0。 最佳答案 这是一个good example 。基本上,
我尝试安装.app文件,但是当我安装并单击“同步”(在iTunes中)时,我开始在设备上开始安装,然后停止,这是一个问题,我不知道在哪里,但我看到了我无法解决的奇怪的事情: 最佳答案 似乎您没有在Xc
自从我生成 JavaDocs 以来已经有一段时间了,我确信这些选项在过去 10 年左右的时间里已经得到了改进。 我能否得到一些有关生成器的建议,该生成器将输出类似于 .Net 文档结构的 JavaDo
我想学习如何生成 PDF,我不想使用任何第三方工具,我想自己用代码创建它。到目前为止,我所看到的唯一示例是我通过在第 3 方 dll 上打开反射器查看的代码,以查看发生了什么。不幸的是,到目前为止我看
我正在从 Epplus 库生成 excel 条形图。 这是我成功生成的。 我的 table 是这样的 Mumbai Delhi Financial D
我是一名优秀的程序员,十分优秀!