So I just uploaded my site to heroku but none of the styles are showing. I have no idea what the problem is.
Heroku site http://shielded-garden-1674.herokuapp.com/
This is my Github repo https://github.com/LaurentLousky/todolist
This is what "heroku log" gives me. http://pastebin.com/cj17Pc4a
Im using Foundation 5 for styling.
Thank you all so much, any help is highly appreciated.
By default, Heroku will not serve your assets. You should add this to config/application.rb:
config.serve_static_assets = true
Or add this to the Gemfile and run bundle install :
gem 'rails_12factor', group: :production
See https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets and https://devcenter.heroku.com/articles/rails-asset-pipeline for a more thorough explanation
I am not able to see your Heroku app.
However, check if your code adds/links your css files in the same way your files are named. For example if in your code your files are named "Styles.css", make sure your code states the name of your files as "Styles.css" and not "styles.css" because once in Heroku cloud, system may not recognize the file.
Related
I tried to find a similar case to mine but didn't succeed.
Here is the issue. I followed Symfony documentation to add Bootstrap to my project.
I indeed get a bootstrap folder in a new folder called "nodes_modules".
The thing is i can't find a global.scss file anywhere (as mentioned in the tutorial) then i don't know where to put the following command:
#import "~bootstrap/scss/bootstrap";
Do i have to create this file or does it exist somewhere in my Symfony project?
Thank you in advance.
Yes, global is your application scss file, it can be named different on you wish. You can refer this documentation in order to see how to configure it (it is app.scss in the example)
I understood what was wrong there! So if you are creating a Symfony 4.1 project on mac and you don't know where to import your bootstrap theme(s) since you don't have any assets folder here is the solution:
To have the assets folder you have to install the webpack "encore".
Please make sure you have node.js and yarn installed before that.
Then just run the following commands inside your root project directory:
composer require symfony/webpack-encore-pack
yarn install
You might have now an "assets" folder inside your project with an assets/css/app.css file and a assets/js/app.js file.
Thank you for your time ScayTrase.
New to Jekyll and new to Ruby I tried to include autoprefixer-rails for my (s)css files directly into Jekyll. So once the page is generated by Jekyll autoprefixer would run over my generated css files. Unfortunately, I haven't managed to set things up properly and autoprefixer doesn't seem to even touch my files.
Following my Gemfile:
source "https://rubygems.org"
gem 'jekyll'
gem 'jekyll-assets'
gem 'autoprefixer-rails'
And parts of my Jekyll configuration file:
...
gems: ['jekyll-assets', 'autoprefixer-rails']
...
Which settings are missing to make it work?
Any help is appreciated!
I am able to use it with jekyll 3 by installing the octopress autoprefixer here:
https://github.com/octopress/autoprefixer.
You then put:
gems: [octopress-autoprefixer] in your config file. I am not using octopress, I only installed this to see if it would work.
In the process I also installed node.js (on a pc , win 10), so I could install autoprefixer-rails. Not sure if the octopress installer took care of this or not though, I was just trying random things to see if it would work. I think node.js was a requirement as I remember nothing happened until I rebooted and then everything worked.
It works great, though it does slow my build time down - on a small site that normally builds in .5 seconds it goes up to 12 seconds.
That's perfectly possible, and easy, too!
Most resources you'll find online will suggest to switch to Jekyll Assets, which comes with a number of default plugins, including autoprefixer-rails. That, however, replaces the entire Jekyll asset pipeline, and requires changes in lots of places. A fairly high investment up front, just to get it working. Plus, the project appears to be dormant.
Continuing my quest to find a simple solution to a simple problem, I came across jekyll-autoprefixer, available as a Ruby Gem. Integrating that into my Jekyll workflow was embarrassingly straightforward:
Update the Gemfile to include the following:
gem "jekyll-autoprefixer", "~> 1.0.2"
Add the following to _config.yml:
plugins:
- jekyll-autoprefixer
Optionally add required browser support to _config.yml (e.g. for the latest 2 versions and Edge version 14 and up):
autoprefixer:
browsers:
- last 2 versions
- Edge >= 14
Note: You can alternatively supply a .browserslistrc file in the root directory.
Optionally enable CSS Grid Layout prefixing. This appears to be unsafe, and is disabled by default. You can either enable it from CSS code using a control comment (e.g. /* autoprefixer grid: autoplace */), or globally through _config.yml:
autoprefixer:
grid: autoplace
That's all that's needed to integrate autoprefixer into Jekyll.
Documentation to add Autoprefixer to Jekyll with jekyll-assets and autoprefixer-rails has been updated:
https://github.com/jekyll/jekyll-assets#addons
autoprefixer-rails is a Rails plugin, it has nothing to do with Jekyll and can't be used in Jekyll.
If you need a similar feature in Jekyll, you currently have no other options than develop it yourself. You can grab part of the code from the Rails plugin, but the way Jekyll plugins work is significantly different.
My app is throwing this error when I try to push to Heroku. It looks like the culprit is a rogue !global line in a stylesheet somewhere, but I'm not sure where the source code lives.
rake aborted!
Sass::SyntaxError: Invalid CSS after "...odules, $name) ": expected "}", was "!global;"
(in /tmp/build_6cf14c02-e49b-44e7-819c-871d5da3cf73/app/assets/stylesheets/framework_and_overrides.css.scss:13)
Would greatly appreciate any help.
Change your foundation-rails gem from 5.4.4.0 to 5.4.3.1 in your gem file
gem 'foundation-rails', '5.4.3.1'
then run
bundle update
This should do it for now tell they fix it :)
Additionally:
As for finding the file "bundle show foundation-rails" use the finder "Go to folder" to the path and find "_function.scss" it is under vendor assets stylesheets foundation _function.scss
Both of my answers could be found in the link by gustavo-beathyate
As for heroku error
make sure if your adding any thing to the assets to use
rake assets:precompile RAILS_ENV=production
and then
also when you push use -f
git push -f heroku master
if not only use
git push -f heroku master
Here's a solution:
http://foundation.zurb.com/forum/posts/19222-sass-syntax-error-on-rails
You basically have to open the gem and modify line 13 in _functions.scss, removing the call to !global.
This issue has now been fixed with v5.4.5 of Foundation. See also here for some more background on the issue.
I was getting your exact error after I upgraded to foundation-rails 5.5.0.0. I updated the sass-rails gem per this post: https://stackoverflow.com/a/27807138/1753903 and the error went away.
My repo SelfFunderworks perfectly fine at my local machine. When I am deploying on Heroku, I observe the errors as shown below:
Error compiling CSS asset
Sass::SyntaxError: File to import not found or unreadable: homepage/key_points.
Load paths:
/app/app/assets/images
/app/app/assets/javascripts
/app/app/assets/stylesheets
/app/vendor/assets/javascripts
/app/vendor/assets/stylesheets
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/images
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/javascripts
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-4.1.0/app/assets/stylesheets
/app/vendor/bundle/ruby/2.0.0/gems/jquery-ui-rails-3.0.4/app/assets/javascripts
(in /app/app/assets/stylesheets/main.scss:3)
/app/app/assets/stylesheets/homepage.scss:3
I identified the path and observed that homepage/key_points is residing under the following path on my local machine:
/views/preorder/homepage/_key_points.html.erb
Upon modifying the contents of homepage.scss (as shown below), Heroku still throws up the same error.
#import "preorder/homepage/key_points";
Appreciate if someone can guide where I am going wrong?
I'm not sure what's your intention there, but you are trying to import a HTML file into a CSS file, which would produce broken CSS if it were successful.
And you can only import files for assets from certain locations (app/assets, lib/assets or vendor/assets).
In your case, the clue is on /app/app/assets/images. Notice the double app there. First, please follow the guide on setting up assets compilation for Rails 4 on Heroku.
You seem to be missing gem 'rails_12factor', group: :production on your Gemfile.
I got the issue fixed. I overlooked /assets/stylesheets/homepage directory. It had some .css.scss files which upon renaming to .scss fixed the issue.
I'm using JetBrains PhpStorm, which is probably the most epic IDE I've ever used.
The question is simple. How do I add Compass syntax support to it? I've got it installed, it renders and works, but PhpStorm still complains about undefined imports and mixins.
How can I resolve this? Can Compass be included as an external library?
Edit: I'd just like to note that this feature request is for the RubyMine IDE (also by JetBrains), it's not for PhpStorm/WebStorm.
It's explanation of Martin's answer.
Symlink to compass gem directory in your sass folder works great.
Instruction(Windows)
open cmd with admin privileges
change path to your project sass folder, for example cd projectname\sass
run mklink /d compass $GEM_LOCATION\frameworks\compass\stylesheets\compass, as for me $GEM_LOCATION = C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2
Thats all, now PhpStorm will not highlight compass mixins as errors, and will add them in autocomplete suggestions.
Warning: If you want to delete created symlink DON'T use delete, it will remove source directory.
open cmd with admin privileges, cd $yourProjectSassPath, and run rmdir compass
As the above user mentioned it also works to add the path to the Compass stylesheets as a resource directory in your project.
For example, my compass stylesheets are located at:
C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets
Go to Settings > Project settings > Directories.
Add a content root
Add the compass stylesheets directory
Click 'Resource Root' (the blue icon)
When you apply you will see that PhpStorm finds the compass stylesheets without any problems. You can even ctrl+click (windows) on them to open them directly.
Good luck!
I solved it by placing a symlink of the compass-directory (from $GEM_LOCATION/frameworks/compass/stylesheets/compass) into the folder where my stylesheet lives. It's more of a workaround but it makes me and the phpstorm-inspections/-autocompletion happy.
I think it's better to add the directory in the Directories settings: http://www.jetbrains.com/phpstorm/webhelp/directories.html
In the example above, add a new content root of C:\dev\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2.
This is more easily fixed by using a better source for the executable.
From: http://youtrack.jetbrains.com/issue/WEB-9139
In Windows, use an executable path like:
C:\Ruby200\lib\ruby\gems\2.0.0\gems\compass-0.12.2\bin\compass
While on the Mac use something like:
/Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/bin/compass