spree 3.0 bootstrap 自定义如何
spree 3.0 bootstrap customization how to
我已经安装了 Spree 3-0-Stable 测试站点,我想添加 bootswatch 主题并更改一些 bootstrap 项的填充。
我很难理解我在哪里做的。
一个例子是我想修改 .panel-footer padding,这样商品价格就会显示在一个较小的框中。
我认为覆盖应该进入 app/assets/stylesheets/spree/frontend。
当我添加以下内容时
.panel-footer {
/* padding: 10px 15px; */
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
@import "bootstrap";
到
app/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss
价格框的填充没有改变,但网格中项目的等间距丢失了。
我正在按照正确的方式自定义商店吗?
不,你永远不应该以这种方式定制,
因为当狂欢得到更新时,您的所有组件都将被覆盖,您将丢失所有更新。
所以最好开始使用狂欢指南中给出的污损覆盖。
首先它看起来很难
但是一旦看完这个视频,您就可以轻松使用污损覆盖概念。
我已经安装了 Spree 3-0-Stable 测试站点,我想添加 bootswatch 主题并更改一些 bootstrap 项的填充。
我很难理解我在哪里做的。
一个例子是我想修改 .panel-footer padding,这样商品价格就会显示在一个较小的框中。
我认为覆盖应该进入 app/assets/stylesheets/spree/frontend。
当我添加以下内容时
.panel-footer {
/* padding: 10px 15px; */
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
@import "bootstrap";
到
app/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss
价格框的填充没有改变,但网格中项目的等间距丢失了。
我正在按照正确的方式自定义商店吗?
不,你永远不应该以这种方式定制, 因为当狂欢得到更新时,您的所有组件都将被覆盖,您将丢失所有更新。 所以最好开始使用狂欢指南中给出的污损覆盖。 首先它看起来很难 但是一旦看完这个视频,您就可以轻松使用污损覆盖概念。