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

Question

我在部署自定义 _variables.scss 时遇到问题到我的生产服务器作为编译 Assets 。

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

我正在使用带有 Spree 3.0 Stable 分支的 Rails 4.2.1。

我有以下结构:

在 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 list 没有被使用/我没有在那里声明任何特定的东西。

生成的 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">

一切都在开发中，但是当我将它部署到我的测试服务器时，一些变量被默认覆盖，这包括导航栏配置和颜色。



我不确定这是否是因为 Assets 编译顺序；或者如果是这样 bootstrap-sass是进口的。

关于如何使用 _variables.scss 的任何建议没有被覆盖？我不想要任何重复，这就是为什么我想更改变量 sass 文件中的导航栏和颜色。

Answer 1

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

Bootstrap Sass gem 状态:

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

为了让它在生产/编译 Assets 中工作。我不得不:

将 all.css 更改为 all.scss

将//= 要求语句更改为 @import

供应商/ Assets /样式表/spree/frontend/all.scss:

// Sass Application Manifest

@import "frontend_bootstrap";

供应商/ Assets /样式表/spree/frontend/frontend_bootstrap.css.scss:

// Spree Bootstrap Override

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

我希望这可以帮助任何像我一样绊倒的人。