[英]Override Spree Commerce's Bootstrap Variables
I'm having an issue with deploying a customized _variables.scss
to my production server as a compiled asset. 我将自定义_variables.scss
部署到我的生产服务器作为编译资产时遇到问题。
Everything is fine on my development environment, it's in production that my variables are being overwritten. 在我的开发环境中,一切都很好,生产中我的变量被覆盖了。
I'm using Rails 4.2.1 with Spree 3.0 Stable branch. 我正在使用Rails 4.2.1和Spree 3.0 Stable分支。
I have the following structure: 我有以下结构:
Files created in vendor/assets/stylesheets/frontend
在vendor/assets/stylesheets/frontend
创建的文件
The _variables.scss
contains the following: _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;
The frontend_boostrap.css.scss
contains the following: frontend_boostrap.css.scss
包含以下内容:
// Spree Bootstrap Override
// Core
@import "variables";
@import "bootstrap-sprockets";
@import "bootstrap";
// Custom Overrides
@import "navbar";
The navbar.scss
contains the following: 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;
}
}
The Rails standard app/assets/stylesheets/application.css
manifest isn't being used/I haven't declared anything specfic in there. 没有使用Rails标准app/assets/stylesheets/application.css
清单/我没有在那里声明任何特定的东西。
The produced HTML head code shows all.css and frontend. 生成的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">
All is well in development but when I deploy this to my test server, some of the variables are being overwritten by the default, this includes the navbar configuration and a color. 一切都在开发中,但当我将其部署到我的测试服务器时,默认情况下会覆盖一些变量,包括导航栏配置和颜色。
I'm not sure if this is because of asset compilation order; 我不确定这是否是因为资产编制顺序; or if it's how bootstrap-sass
is imported. 或者如果它是如何导入bootstrap-sass
的。
Any suggestion on how I can go about using _variables.scss
without it being overwritten? 关于如何在不被覆盖的情况下使用_variables.scss
任何建议? I didn't want any duplication, that's why I wanted to change the navbar and colors in the the variables sass file. 我不想要任何重复,这就是我想要更改变量sass文件中的导航栏和颜色的原因。
It looks like I've solved the issue. 看起来我已经解决了这个问题。
The Bootstrap Sass gem states: Bootstrap Sass gem指出:
Do not use //= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables. 不要在Sass中使用// = require,否则您的其他样式表将无法访问Bootstrap mixins或变量。
To get this working in Production / compiled assets. 使其在生产/编译资产中运行。 I had to: 我不得不:
The vendor/assets/stylesheets/spree/frontend/all.scss: vendor / assets / stylesheets / spree / frontend / all.scss:
// Sass Application Manifest
@import "frontend_bootstrap";
The vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss: vendor / assets / stylesheets / spree / frontend / frontend_bootstrap.css.scss:
// Spree Bootstrap Override
// Core
@import "bootstrap-sprockets";
@import "variables";
@import "bootstrap";
I hope this helps anyone who stumbled like I did. 我希望这可以帮助任何像我一样跌跌撞撞的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.