覆盖 Spree Commerce 的引导变量 [英] Override Spree Commerce's Bootstrap Variables
问题描述
我在将自定义 _variables.scss
作为编译资产部署到我的生产服务器时遇到问题.
I'm having an issue with deploying a customized _variables.scss
to my production server as a compiled asset.
在我的开发环境中一切正常,在生产环境中我的变量被覆盖了.
Everything is fine on my development environment, it's in production that my variables are being overwritten.
我使用 Rails 4.2.1 和 Spree 3.0 Stable 分支.
I'm using Rails 4.2.1 with Spree 3.0 Stable branch.
我有以下结构:
在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
清单/我尚未在其中声明任何特定内容.
The Rails standard app/assets/stylesheets/application.css
manifest isn't being used/I haven't declared anything specfic in there.
生成的 HTML 头部代码显示 all.css 和前端.
The produced HTML head code shows all.css and frontend.
<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.
我不确定这是不是因为资产编译顺序;或者它是如何导入 bootstrap-sass
的.
I'm not sure if this is because of asset compilation order; or if it's how bootstrap-sass
is imported.
关于如何使用 _variables.scss
而不会被覆盖的任何建议?我不想要任何重复,这就是为什么我想更改变量 sass 文件中的导航栏和颜色.
Any suggestion on how I can go about using _variables.scss
without it being overwritten? I didn't want any duplication, that's why I wanted to change the navbar and colors in the the variables sass file.
推荐答案
看来我已经解决了这个问题.
It looks like I've solved the issue.
Bootstrap Sass gem 声明:
不要在 Sass 中使用//= require 否则你的其他样式表将不会能够访问 Bootstrap 混合或变量.
Do not use //= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
要使其在生产/编译资产中工作.我不得不:
To get this working in Production / compiled assets. I had to:
- 将 all.css 更改为 all.scss
- 将//= require 语句更改为 @import
vendor/assets/stylesheets/spree/frontend/all.scss:
The vendor/assets/stylesheets/spree/frontend/all.scss:
// Sass Application Manifest
@import "frontend_bootstrap";
vendor/assets/stylesheets/spree/frontend/frontend_bootstrap.css.scss:
The 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.
这篇关于覆盖 Spree Commerce 的引导变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!