I'm using Rails with webpacker. Everything works fine locally but as soon as I push up to heroku it breaks.
I removed everything except my own scss and noticed some styles weren't loading in production.
For example in the same file, .fabric-container will not be present, but #renderCanvas will:
.fabric-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
border-radius: 10%;
overflow: hidden;
&:after {
content: '';
display: block;
margin-top: 100%;
}
}
#renderCanvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .6;
}
Here is a shot of the css with everything else stripped out, and on the bottom is the css of the page on prod. Totally missing .canvas-container Works fine locally!
Many red herrings in this debug session... but I knew SOMETHING was altering the output css.
Turns out Rails Jumpstart Pro includes tailwind and purgecss.
We have included PurgeCSS by default to automatically remove unused
CSS when deploying to production. This greatly reduces the size of
TailwindCSS in production to deliver a much faster experience in
production.
This is located in postcss.config.js which is why I didn't see it in config/environments etc.
So if this is happening to you, check postcss.config.js, and either add your files there or remove it altogether!
Related
In a Rails 6 app, I have an image file in app/assets/images/bgs/abc.jpg
To attach that image to body background, how can I have a style declaration in a style tag in application.html.haml that works the same for both local development and when pushed to heroku?
Works in development, but not Heroku, due I suppose to asset handling differences:
#application.html.haml
%style
body::after {
content: "";
background: url("/assets/bgs/abc.jpg"); ### WORKS DEVT ONLY ###
background-size: cover;
background-repeat: no-repeat;
opacity: 0.12;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-attachment: fixed;
z-index: -1;
}
I understand I should be using asset_path but none of these work in development:
background: asset_path("/bgs/abc.jpg");
background: asset_path("bgs/abc.jpg");
background: asset_url("/bgs/abc.jpg");
background: asset_url("bgs/abc.jpg");
There is a spectacular amount of inconsistent information out there, some cases saying use asset-url or asset-path, some cases saying asset_url or asset_path, and even some cases saying use url(~filename.jpg), some say use background: some say background-image.
Is there a simple way to use a background image with the exact same code working both on development and Heroku?
Rails on production mode will precompile assets so that all images on assets folder (and child folders) will be precompiled and saved as image name-fingeprint on public folder, for example: i have a image assets/images/bgs/pragmatic_programmer.jpg, then after run command rake assets:precompile, this image will become /public/assets/bgs/pragmatic_programmer-9aa8a13ac97f205fe891bee7c42c6e711f997186d8975d5a4106ca2fe53ccc61.jpg.
That the cause your app work on development mode but not on production mode since the images path changed, you can access new compiled images by ActionView::Helpers::AssetTagHelper#image_path as below
#application.html.haml
%style
body::after {
content: "";
background: url(= image_path("bgs/abc.jpg"));
...
}
you could test on development mode, just run rake assets:precompile before start server.
The answer is for the style definition to be:
background: url( asset_path("bgs/abc.jpg") );
that works on both development and production.
I have developed a website and am in the process of converting most of the tables over to DataTables. In testing out one of the DataTable features the Print button, I discovered that nothing would print except the Title of the web page. At first I thought it was an issue with DataTables, but after playing around I've discovered that none of my pages seem to want to print. I'm testing with Chrome because it has the Print Preview, but I can right-click on any page in my site and select Print... and I get the same behavior -- only the Title of the web page displays. Has anybody experienced anything like this before? Here's a link to my site:
JCPS DMC
Even on the home page, try right clicking and select Print and you'll see what I mean. Please tell me this is some super-easy that I just don't know about -- some setting that I've overlooked. I will be happy to provide any support information you need, but I don't even know what that would be... :(
Well this is embarrassing...apparently at some point I included a css script in my Master page (the site is developed using asp.net). In the css I had this little gem which was blocking anything from being printed:
#media print {
body
{
visibility: hidden;
border-top: hidden;
width: 50%;
}
.noPrint
{
display: none !important;
}
ol
{
display: none;
}
.printSection, .printSection *
{
visibility: visible;
margin: 1px;
padding: 1px;
}
.printSection
{
position: relative;
left: 0;
top: 0;
}
}
Not even sure why I put that in there, but I removed it and everything is working peachy now...
I've searched through Stack lot of times but still nothing works for me.
Images Ive set in my css.erb file does not show in heroku app.
here is my css file example
.bird-box {
position: relative;
height: 600px;
background: url(<%= image_path 'bird-bg.jpg' %>);
background-size: auto 600px;
background-position: top center;
background-attachment: fixed;
overflow: hidden; }
I've changed producion.rb
config.serve_static_files = true;#ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.compile = true
But that did not help at all.
Also I tried to compile locally than push to heroku, still no result. Can anybody tell me the way out?
Go to development console in your browser and check if images are loaded
Try to precompile assets on heroku using heroku run rake assets:precompile
I've just started to work with the rails asset pipeline, I'm a front-end guy.
I'm trying to use image-url helper within sass files so that I don't have to hard-code the path.
The following SASS
.some-class
background: image-url("image.png")
generates the following CSS
.some-class{
background: url("asset/image.png");
}
How do I use the image-url helper to generate the following css, without hard-coding the image path ?
.some-class{
background: url("asset/image.png") no-repeat 0 0 #fff;
}
You can use,
.some-class
background-image: image-url("image.png")
background-repeat: no-repeat;
background-color: #fff;
and so on.
or
background: #fff image-url("image.png") no-repeat 0 0;
should work.
You propably should use:
background-image: asset-url("image.png", image) no-repeat 0 0 #fff;
The asset-url is a sass/rails feature, which lets the asset pipeline do some (production) work for you. You can read about that feature here.
Using the helper is preferable over a plain url("image.png"), as it gives you finger printed URLs in production. See this StackOverflow answer.
I am learning Rails from "Agile Web Development With Rails" (4th edition, Rails 3) and I am having trouble getting a stylesheet to apply. To quickly take you through what I have done so far, I first generated a scaffold:
rails generate scaffold Product title:string description:text image_url:string price:decimal
Then of course:
rake db:migrate
I then used the db/seeds.rb file to load some data into the products table. When I loaded localhost:3000/products, everything was working great. Now, I copied the stylesheet code the book provides to the products.css.scss file generated by the scaffold:
.products {
table {
border-collapse: collapse;
}
table tr td {
padding: 5px;
vertical-align: top;
}
.list_image {
width: 60px;
height: 70px;
}
.list_description {
width: 60%;
dl {
margin: 0;
}
dt {
color: #244;
font-weight: bold;
font-size: larger;
}
dd {
margin: 0;
}
}
.list_actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
.list_line_even {
background: #e0f8f8;
}
.list_line_odd {
background: #f8b0f8;
}
}
Now, when I load localhost:3000/products, the stylesheet is not being applied.I can see the stylesheet in inspect element, but it is not applying. I have tried everything imaginable. Firstly, I made sure this line of code was in my application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
Given that my new stylesheet (products.css.scss) is in the assets/stylesheets/ directory, it should be loaded. When I inspect element on localhost:3000/products, I actually see the stylesheet there, but it is not being applied. the next thing I tried was running:
rake assets:precompile
No success. After deleting the public/assets directory, I made sure this line of code was in my config/application.rb file:
config.assets.enabled = true
It was. Next, I headed over to my assets/stylesheet/application.css file and tried adding this line of code:
*= require products
Once again, no success. Lastly, I tried restarting my server to see if there was an effect. Failure again. I am at dead end here. Please, I would appreciate any and all input on this matter as I am so burnt-out and frustrated with this matter.
i just spent an hour figuring out the answer, since been having the exact same issue myself. go to your application.css.sass and make sure it has
/* ...
*= require_self
*= require_tree .
*/
in it. this auto loads all the other .css.sass in apps/assets/stylesheets, then precompiles them into public/assets/stylesheets to be 1 statis css file, and that is being served to your browser.
not sure if this will work but worth a shot, try removing .css, just keep products.scss. Also get a very simple style going and see if it works. Or even inline it to see.