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.

compiled assets on server

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:

  1. change all.css all.scss
  2. 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.


Comments

Post a Comment

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

go - Idiomatic way to handle template errors in golang -