ruby on rails - Override Spree Commerce's Bootstrap Variables -
i'm having issue deploying customized _variables.scss
production server compiled asset.
everything fine on development environment, it's in production variables being overwritten.
i'm using rails 4.2.1 spree 3.0 stable branch.
i have following structure:
files created in vendor/assets/stylesheets/frontend
- _variables.scss (my custom app variables)
- all.css (generated spree)
- frontend_bootstrap.css.scss (override spree)
- navbar.scss (my customization)
the _variables.scss
contains following:
// place 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 following:
// spree bootstrap override // core @import "variables"; @import "bootstrap-sprockets"; @import "bootstrap"; // custom overrides @import "navbar";
the navbar.scss
contains following:
// 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 specfic in there.
the produced html head code shows all.css , 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 in development when deploy test server, of variables being overwritten default, includes navbar configuration , color.
i'm not sure if because of asset compilation order; or if it's how bootstrap-sass
imported.
any suggestion on how can go using _variables.scss
without being overwritten? didn't want duplication, that's why wanted change navbar , colors in the variables sass file.
it looks i've solved issue.
the bootstrap sass gem states:
do not use //= require in sass or other stylesheets not able access bootstrap mixins or variables.
to working in production / compiled assets. had to:
- change all.css all.scss
- change //= require statements @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";
i hope helps stumbled did.
Spree Commerce Development
ReplyDelete