加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ruby-on-rails – 覆盖Spree Commerce的Bootstrap变量

发布时间:2020-12-17 03:42:01 所属栏目:百科 来源:网络整理
导读:我将自定义_variables.scss部署到我的生产服务器作为编译资产时遇到问题. 在我的开发环境中,一切都很好,生产中我的变量被覆盖了. 我正在使用Rails 4.2.1和Spree 3.0 Stable分支. 我有以下结构: 在vendor / assets / stylesheets / frontend中创建的文件 _va
我将自定义_variables.scss部署到我的生产服务器作为编译资产时遇到问题.

在我的开发环境中,一切都很好,生产中我的变量被覆盖了.

我正在使用Rails 4.2.1和Spree 3.0 Stable分支.

我有以下结构:

在vendor / assets / stylesheets / frontend中创建的文件

> _variables.scss(我的自定义应用变量)
> all.css(由Spree生成)
> frontend_bootstrap.css.scss(覆盖Spree)
> navbar.scss(我的自定义)

_variables.scss包含以下内容:

// Place all Sass variables here.

// Colors
$brand-primary: green;
$gray: #aaa;

// Navbar
$navbar-default-bg: #fff;
$navbar-height: 100px;
$navbar-border-radius: 0;
$navbar-default-border: none;
$navbar-default-toggle-hover-bg: $navbar-default-bg;
$navbar-default-toggle-icon-bar-bg: lighten($gray,60%);
$navbar-default-toggle-border-color: $navbar-default-bg;
$navbar-default-link-active-bg: $brand-primary;

frontend_boostrap.css.scss包含以下内容:

// Spree Bootstrap Override

// Core
@import "variables";
@import "bootstrap-sprockets";
@import "bootstrap";

// Custom Overrides
@import "navbar";

navbar.scss包含以下内容:

// Navbar Customization

.navbar-myapp {
  margin-bottom: 40px;
  border-top: none;
  border-bottom: 1px solid $navbar-default-toggle-icon-bar-bg;

  .navbar-brand {
    padding: 15px;
  }
}

没有使用Rails标准app / assets / stylesheets / application.css清单/我没有在那里声明任何特定的东西.

生成的HTML头代码显示了all.css和前端.

<link rel="stylesheet" media="screen" href="/assets/spree/frontend/all.self-33fc4a513acb9a5f3fd4ba26b89c94184e5d028c4bd40eee6736d3ccfea5c140.css?body=1">

<link rel="stylesheet" media="screen" href="/assets/spree/frontend/frontend_bootstrap.self-88eb7ced3e4d78d298a33264c3cfc65af6cef8ac32ae56a7dd7a3e321ba97378.css?body=1">

一切都在开发中,但当我将其部署到我的测试服务器时,默认情况下会覆盖一些变量,包括导航栏配置和颜色.

我不确定这是否是因为资产编制顺序;或者如果它是如何导入bootstrap-sass的.

关于如何在不被覆盖的情况下使用_variables.scss的任何建议?我不想要任何重复,这就是我想要更改变量sass文件中的导航栏和颜色的原因.

解决方法

看起来我已经解决了这个问题.

Bootstrap Sass宝石状态:

Do not use //= require in Sass or your other stylesheets will not be
able to access the Bootstrap mixins or variables.

使其在生产/编译资产中运行.我不得不:

>将all.css更改为all.scss
>将// = require语句更改为@import

vendor / assets / stylesheets / spree / frontend / all.scss:

// Sass Application Manifest

@import "frontend_bootstrap";

vendor / assets / stylesheets / spree / frontend / frontend_bootstrap.css.scss:

// Spree Bootstrap Override

// Core
@import "bootstrap-sprockets";
@import "variables";
@import "bootstrap";

我希望这可以帮助任何像我一样跌跌撞撞的人.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读