覆盖Spree Commerce的Bootstrap变量
在将自定义的_variables.scss部署到生产服务器作为编译资产时，我遇到了问题。
在我的开发环境中，一切都很好，在生产过程中，我的变量被覆盖了。
我使用的是Rails 4.2.1和Spree 3.0稳定分支。
我的结构如下：
用vendor/assets/stylesheets/frontend创建的文件
- _variables.scss (我的自定义应用程序变量)
- all.css (由狂欢产生)
- frontend_bootstrap.css.scss (覆盖狂欢)
- 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文件中的导航条和颜色。
Stack Overflow用户
发布于 2015-06-10 00:41:50
看来我已经解决了这个问题。
自举Sass gem声明：
不要在Sass中使用//= require，否则您的其他样式表将无法访问Bootstrap混合器或变量。
使其在生产/编译资产中工作。我不得不：
- 将all.css更改为all.scss
- 将//=需要量语句更改为@import
The vendor/assets/stylesheets/spree/frontend/all.scss：
// Sass Application Manifest
@import "frontend_bootstrap";The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss：
// Spree Bootstrap Override
// Core
@import "bootstrap-sprockets";
@import "variables";
@import "bootstrap";我希望这能帮助那些像我一样绊倒的人。
https://stackoverflow.com/questions/30723991
复制相似问题
腾讯云开发者
