我遇到将自定义_variables.scss
部署到我的生产服务器作为编译资产的问题。
在我的开发环境中,一切都很好,生产中我的变量被覆盖了。
我正在使用Rails 4.2.1和Spree 3.0稳定分支。
我有以下结构:
在vendor/assets/stylesheets/frontend
_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文件中的导航栏和颜色。
答案 0 :(得分:8)
看起来我已经解决了这个问题。
Bootstrap Sass宝石状态:
不要在Sass中使用// = require或其他样式表不会 能够访问Bootstrap mixins或变量。
在生产/编译资产中使用此功能。我必须:
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";
我希望这可以帮助任何像我一样跌跌撞撞的人。