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.
I'm using Rails 4.2.1 with Spree 3.0 Stable branch.
I have the following structure:
Files created in vendor/assets/stylesheets/frontend
_variables.scss (my custom app variables)
all.css (generated by Spree)
frontend_bootstrap.css.scss (override Spree)
navbar.scss (my customization)
The _variables.scss contains the following:
// 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:
// Spree Bootstrap Override
// Core
#import "variables";
#import "bootstrap-sprockets";
#import "bootstrap";
// Custom Overrides
#import "navbar";
The navbar.scss contains the 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 anything specfic in there.
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.
I'm not sure if this is because of asset compilation order; or if it's how bootstrap-sass is imported.
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.
The Bootstrap Sass gem states:
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:
Change all.css to all.scss
Change the //= require statements to #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 this helps anyone who stumbled like I did.
Related
My application is doing some kind of logging and exposing my computer folders and username in application.css
I have the stylesheet tag on my application.html.erb
layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
It renders a link like a normal rails applications would something along the lines of
<link rel="stylesheet" media="all"
href="/assets/application.self-
80b79e181044a0c9a308926720613f77d9222f04fe80f2a18ad8b83fa3ca7e3d.css?
body=1" />
However if a follow the link the document reveals sensitive information about my computer
/*!
* Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/* line 1, /Users/XXXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_root.scss */
:root {
--blue: #007bff;
}
/* line 21, /Users/XXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_reboot.scss */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* line 27, /Users/XXXXX/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/bootstrap-4.0.0/assets/stylesheets/bootstrap/_reboot.scss */
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
What could be causing this problem?
Edit: I'm using rails 5.1, once the app is deployed and running on production mode, it doesn't show the path of the production server it still disclosures my computer folders.
application.scss
#import "pulse/variables";
//Custom bootstrap variables must be set or imported *before* bootstrap.
#import "bootstrap";
#import "pulse/bootswatch";
#import "bootstrap-select/bootstrap-select";
Put your bootstrap stylesheet to /lib/assets/stylesheets then try to require with pipeline:
application.scss
//= require pulse/variables
//= require bootstrap
//= require pulse/bootswatch
//= require bootstrap-select/bootstrap-select
I'm having an issue in that inside my controllers scss file, I continually have to mark everything with !important in order to style elements. Here's an example input element in my Map controllers scss:
.search-field {
width: 300px !important;
box-shadow: none !important;
border-bottom: none !important;
display: inline-block;
font-size: 16px;
margin-left: 15px !important;
}
This is because inside application.scss, I imported my material library which takes precedence over map.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
#import "materialize";
#import "font-awesome";
* {
font-family: 'Raleway', sans-serif;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
min-width: 100%;
min-height: 100%;
background-color: #1A1A1A;
}
How can I avoid having to use the !important flag everywhere?
EDIT:
I have also tried the following (with no luck)
inside application.html.erb I added an additional link to my controllers css
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'map', media: 'all', 'data-turbolinks-track': 'reload' %>
then removed the use of require_tree . inside application.scss
When I restarted the server however, I still needed the !important tags. Still no luck
Since it's very rare to need every stylesheet in your application to be loaded on every page, you'll find importing only what's necessary per page to be much more efficient, shorten load times, and also address the problem of which styles take precedence! The Rails way to do this is to remove the require tree statements in your /application.js and /application.scss files. The only files imported in your application.js & application.scss files should be app-wide styles or js. Then you would add the following lines to your layouts/application.html.erb file:
Inside the <head> tag:
<%= stylesheet_link_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.css"]
This will then include the corresponding controller's stylesheets. Putting this before or after the stylesheet_link_tag for your application changes the precedence based upon your needs.
Then in your <body> tag you should add:
<%= javascript_include_tag params[:controller] if Rails.application.assets_manifest.assets["#{params[:controller]}.js"]
Now, to make this work in production for deploying your app you'll need to add the controller names to your config/initializers/assets.rb file or else you'll get an error that the assets weren't compiled. In that file you'll add as follows for your map controller:
Rails.application.config.assets.precompile += %w( maps.js )
Rails.application.config.assets.precompile += %w( maps.css) #Note rails expects the css suffix and not the scss suffix here so use that and not scss even though your file may be maps.scss
Then everytime you add a new controller in the future, add that controller's name to the arrays shown above and then run bundle exec rake assets:precompile RAILS_ENV=production and you're good to go. For more examples checkout my old answer on basically the same problem here: sprockets loads sass in random order with twitter bootstrap
My problem was a combination of lower priority css rules added onto the asset pipeline loading order. I found my problem was solver when I did the following to my application.scss file:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require font-awesome
*= require materialize
*= require_tree .
*/
* {
font-family: 'Raleway', sans-serif;
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
min-width: 100%;
min-height: 100%;
background-color: #1A1A1A;
}
I could remove most !important rules afterwards, and found that I was using a class css rule but it was being overrode by a specific input[type=text] rule, using an ID instead let me make the changes I wanted to.
I am using the theme grasyscale-sass, mainly in one of the links of the project and ALL it works fine, and other links use its own SCSS file. In this scss file I want to change certain bootstrap variables as navbar-default-bg, etc, but to include two scss files (application.scss and my custom.scss file) with stylesheet_link_tag in the file application.html.erb I can't get the changes I've made to these variables in custom.scss, I think always the default values apply, however the normal code CSS is modified.
Any clue what I'm doing wrong? Or am I trying to do something "forbidden"?
Thanks in advance.
/**************/
Here application.html.erb file and how the two scss files are included, both in assets/stylesheets
<%= stylesheet_link_tag 'application', 'custom', media: 'all', 'data-turbolinks-track' => true %>
custom.scss file
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg:#ffffff; /* Navbar default */
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
i{
color: #337ab7;
}
a{
color: #cb2027;
}
#import "bootstrap";
#import "bootstrap-sprockets";
.center {
text-align: center;
}
.navbar-brand{
font-size: 2em;
font-weight: bold;
}
...
and application.js file, included in assets/javascripts
//
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.easing
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
// require.js
//= require grayscale
//= require masonry/jquery.masonry
// require_tree .
Import Bootstrap styles in app/assets/stylesheets/application.scss
#import "bootstrap"; and #import "bootstrap-sprockets"; go inside application.scss along with any other stylesheets.
Without going into how you can/should setup your directories for stylesheets, variables/mixins, etc. Your variables need to come before bootstrap in application.scss and your other customization's after:
Since you're using a theme that all ready has variables used to customize the base bootstrap styles, you'll have to change those Grayscale variables and/or styles in order to change them to what you want.
*In this example _variables = grayscale_variables from the theme and main.scss is basically application.scss.
application.scss
#import "grayscale_variables";
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome-sprockets";
#import "font-awesome";
#import "_grayscale";
#import "style";
grayscale_variables.scss
$grayscale-primary: #cb2027;
$grayscale-dark: #e9e9e9;
$grayscale-light: #cb2027;
$grayscale-body-font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif;
$grayscale-headline-font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
(*and only one bootstrap js should be used) see bootstrap-sass bootstrap-sprockets and bootstrap should not both be included in application.js
My application.scss, but remain unimplemented some variables, for example $body-bg, $navbar-default-bg and so, I think uses main.css of grayscale-sass theme.
I also tried changing the order of some #import
$link-color: #cb2027;
$brand-primary: #cb2027;
$body-bg: #e9e9e9;
$body-bg: #fff;
$navbar-default-brand-color: #cb2027;
$navbar-default-bg: #f8f8f8;
$navbar-height: 30px;
$pagination-active-bg: #cb2027;
$pagination-active-border: #cb2027;
#import 'masonry/transitions';
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'custom';
#import '../../../grayscale-sass/asset/sass/main.scss';
I am using the following gems:
gem 'therubyracer', platforms: :ruby
#gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
and in asset pipeline this is the code
*
*= require_bootstrap_and_overrides
*= require_self
*= require_tree .
*/
and in bootstrap_and overrides file this is the code
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
//#import "fontawesome/font-awesome";
// Glyphicons
#import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
#import url(http://fonts.googleapis.com/css?family=Capriola);
and when i use the class <i class="fa fa-user"></i> like this glyphicon is showing. But for the class <i class="glyphicon glyphicon-user"></i
the glyphicon is not displaying the proper image.
Bootstrap is not being included in your asset pipeline correctly, try this workaround by importing from the CDN source instead of loading from an asset file:
Add this to the head section of your application.html.erb file in your views/layout folder:
FontAwesome icons:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Glyphicon icons, which are packaged with the bootstrap minified CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
I would strongly suggest you to switch to https://github.com/twbs/bootstrap-sass and follow the guide there
My environment is Rails 3.2.8, and all my stylesheets are found in app/assets/stylesheets in .css.scss format. I'm also using Bootstrap-sass for my application.
The stylesheets do not seem to be loaded at all in internet explorer, and I haven't found a solution after some research.
I provide one css file for example:
File: posts.css.scss
$myFontFamily: 'Nanum Gothic', sans-serif;
$baseFontFamily: $myFontFamily;
#import 'bootstrap';
body {
background-color: #000000;
color: #FFF;
}
In IE9, font, body background, font color are not at all affected by this stylesheet. Any help would be appreciated.
I don't think you need the css and just put posts.scss and I'm assuming all config.assets are set correctly too. i.e., you didn't mess with them.