we recently updated from Rails 4.2.7 to Rails 5 and now we are having an issue with Font-Awesome when we precompile the assets.
We include the font-awesome-rails gem (v4.7.0.0) and everything works fine in development.
But if we run rails assets:precompile (it doesn't matter if in dev or production env) the fonts are not appearing in public/assets.
Our manifest.js looks like this:
# app/assets/config/manifest.js
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
//= link emails/base.css
//= link_tree ../images
//= link_tree ../fonts
Our assets.rb is the default one, as you config it now in the manifest.js
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '2.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
We are using sass in our Application with the sass-rails gem from master
Does anyone have an idea what is the problem here?
Regards,
spa
Found the solution.
If I add
%w(eot svg ttf woff woff2).each do |ext|
Rails.application.config.assets.precompile << "fontawesome-webfont.#{ext}"
end
to the assets.rb initializer, everything works fine.
I thought you skip that part, as you should just use the new manifest.js now.
Again what learned.
Just put fonts under app/assets/fonts , and modify url('Your Font Path') to font-url('Your Font Path') in your scss. Asset Pipeline will auto precompile fonts into public/assests folder.
Related
When deploying jekyll project to netlify I am missing my fonts folder.
It works perfectly find when in development mode but when I tell it to run in production it seems to skip over adding my fonts folder to the _site/assets directory.
I believe it has to be something in the config but I am fairly new to jekyll and YAML. And in the code its seems to be saying to add all the assets underneath it to the build process.
Below is my _config.yml file.
copy:
# Paths to static assets that aren't (S)CSS or JavaScript
# because these are completely handled by the sass and javascript tasks
assets:
# all files below the assets dir
- "assets/**/*"
# exclusions:
- "!assets/{js,scss,css}/**/*" # js, scss and css files
- "!assets/css{,/**}" # css dir
- "!assets/js{,/**}" # js dir
- "!assets/scss{,/**}" # scss dir
- "!assets/vendor{,/**}" # vendor di
dist: "_site/assets/"
notification: "Running Copy"
Note: I work for Netlify
While I'm not sure of the fail mode here, I can tell you a couple things that would help you debug:
the easiest way to debug a build is described in this article: https://www.netlify.com/blog/2016/10/18/how-our-build-bots-build-sites/ . This lets you duplicate our build environment in a way that you can access during/after the build so you can see what is happening or has happened in more depth than our build logs
If you write into support we can set a verbose flag on your builds that does the equivalent of 'set -x' on the building shell script to show you what's being run in production, though filtering this output is quite a task for a human, it may be more useful than nothing!
I'm using jspm bundle command to bundle up all of my third-party libs.
jspm bundle app.js - [**/*] ./scripts/bundles/vendor.js --inject --minify
The bundle is created as expected.
For some reason when using the bundle my HTML stopped being loaded and I have no idea why.
In my config file I configured that all HTML files are to be loaded using the text plugin
meta: {"*.html": {loader: "text"}}
When using depcache option (without the bundle) or removing the bundle from the config file everything works fine.
The text plugin is in the bundle as well.
I'm using jspm v0.16.45
I found out the reason this was happening, when bundling the text plugin the call for the HTML files comes before the plugin was loaded as part of the bundle.
just needed to take it out of there.
My Code.
https://github.com/shingo-nakanishi/jekyll-dojo/tree/03e7541c602daab320b18ec7545e4259433dcaf4
jekyll work in local but not work github.
The page build failed with the following error:
Your SCSS file css/main.scss has an error on line 36: File to import not found or unreadable: minima. For more information, see https://help.github.com/articles/page-build-failed-invalid-sass-or-scss.
Why work in local? How to work in github?
Jekyll 3.2 use gem based themes but github pages is still at version 3.1.X.
You have to first locate your minima gem :
bundle show minima
Will give you something like /very/long/path/to/2.2.0/gems/minima-1.0.1. You can then copy/paste _includes, _layouts and _sass folders from your gem to your site root from the file explorer.
Or you can do it with the command line from your root :
cd your/root/folder
cp -R `echo "$(bundle show minima)/_*/"` .
cp -R `echo "$(bundle show minima)/assets/"` .
Your site will now work on gh pages. And theme gem is now useless, because overridden by copied files.
Github Pages does not have the gem minima available to it. You'll have to manually import that into your repo
I believe that you used other theme for your blog, if that so, after you create new Jekyll blog, the default theme is 'minima'. If you copied other theme from the zip file, most of them have the css file inside 'public' folder. So just remove your default 'css' folder that existed after created new Jekyll blog because the actual 'css' file that you'll use is inside 'public' folder created by theme author.
Hope this help.
Is it possible to use Susy with Jekyll? If so, how?
I tried adding 'susy' to my Gemfile and bundle install'ing, then adding susy to my gems array in config.yml:
// _config.yml
...
gems:
- 'jekyll-compass'
- 'susy'
and following the instructions in Jekyll's docs, placing #import 'susy' in my /css/style.scss file. However, I get an error:
File to import not found or unreadable: susy.
jekyll-compass lets you configure Compass. There's more info in its readme, but for susy I just needed to add a _data/compass.yml file, and add
require:
- susy
to it.
Also, jekyll-compass expects your main entry style.scss to be under _sass, not css (like Jekyll's out of the box sass support does). I'm sure this is configurable as well.
If you're willing to install susy with bower, you can just symlink the files under bower_components/susy/sass to the _sass directory (ln -s bower_components/susy/sass/* _sass. I have a fairly minimal working example on GitHub.
The CSS is generated properly and served here for now (though that link will hopefully rapidly become out of sync with the git commit referenced above).
I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.