I have install "Tinymce" though bower into my rails app in vendor/assets/bower_components/tynymce-dist
I include js assets in application.js and it works ok
//= require tinymce-dist
then I include css files in application.css
#import 'tinymce-dist/skins/lightgray/skin.min.css'
it works, but I have an error in rails console
ActionController::RoutingError (No route matches [GET] "/assets/skins/lightgray/skin.min.css"):
and in chrome console
GET http://localhost:3000/assets/skins/lightgray/skin.min.css
it calls from tinymce script in that way
skinUrl = tinymce.baseURL + '/skins/' + skin;
looks like it calls absolut url.
One solucion is to use Tinymce gem, but I dont want to use this way.
How to fix this problem.
If you're using Bower in your Rails app, you'll do well looking into Rails Assets:
This basically allows you to include bower-enabled assets as gems. You just have to search for the respective gem on their app, and then add the gem to your Gemfile:
RA actually have TinyMCE-dist already:
I would personally recommend using Rails Assets - I can delete the answer if you'd rather not. It will give you the benefits of bower and the dependability of the gem system:
#Gemfile
source https://rubygems.org
source https://rails-assets.org #-> add this line
gem 'rails-assets-tinymce-dist'
Then add the following to your JS & CSS assets:
#app/assets/javascripts/application.js
//= require tinymce-dist/tinymce.js
#app/assets/stylesheets/application.css
#import 'tinymce-dist/skins/lightgray/skin'
Related
I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).
Running a local server in development environment, I experience no issues with my assets.
But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.
The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the #import statements which include node modules and load these files separately.
So this:
#import "components/index.sass"
#import "nodemodule/nodemodule.css"
Compiles to this in development:
// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"
and to this in production:
// content of "components/index.sass"
#import "nodemodule/nodemodule.css"
while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.
The links are from my project that you can use as reference
in your asset.rb you need to include the /node_modules path in your default load_path.
If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.
Then you simply write:
#import "nodemodule.css"
In my case for bootstrap 4 in my application.scss
#import bootstrap/scss/bootstrap
which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss
for jquery.js and bootstrap.js you can check my application.js
I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.
This didn't work:
#import "#shopify/polaris/styles.css";
#import "#uppy/core/dist/style.css";
#import "#uppy/dashboard/dist/style.css";
while this did:
#import "#shopify/polaris/styles";
#import "#uppy/core/dist/style";
#import "#uppy/dashboard/dist/style";
The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.
I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.
1) sass-rails
#import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.
2) sprockets
Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:
Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
However, in my case, I was importing directives from a file that itself was imported from application.sass.
I'm fairly new to Rails but I use sass/compass everyday in non-Rails projects.
I want to use compass plugin gems (e.g. compass-rgbapng) along with compass in the project (Rails 3.2.4). I'm using compass-rails too with gem 'sass-rails ~> 3.2.6' and gem 'sass ~> 3.2.7'.
I added both gems to the Gemfile in the :assets group. I bundle installed, etc. I use the #import call in my sass files to use the gems.
Here is what I get from the server :
File to import not found or unreadable: rgbapng.
Load paths:
Sass::Rails::Importer(/Users/simonwalsh/src/quarterly/app/assets/stylesheets/store/_base.sass)
/Users/simonwalsh/src/quarterly/app/assets/stylesheets
/Users/simonwalsh/src/quarterly/.bundle/ruby/1.9.1/gems/compass->0.12.2/frameworks/blueprint/stylesheets
/Users/simonwalsh/src/quarterly/.bundle/ruby/1.9.1/gems/compass->0.12.2/frameworks/compass/stylesheets
/Users/simonwalsh/src/quarterly/.bundle/ruby/1.9.1/gems/breakpoint-2.0.7/stylesheets
Compass::SpriteImporter
(in /Users/simonwalsh/src/quarterly/app/assets/stylesheets/store/_base.sass)
I did not require the gem anywhere as it is not supposed to be required. Even then, I don't even have a compass.rb or any other config files...
--- EDIT ---
I went to compass-rails doc to try their way of doing that. Here is what I tried :
I added a compass.rb in the initializer with either require 'rgbapng' or config.compass.require 'rgbapng' in it,
I tried the same as above in the application.rb file.
Still nothing works, the app refuses to comply with my #import rgbapng call...
I've beens searching around, and I see a ton of different proposed file paths, none of which work for me.
What do I change background-image: url("/../img/glyphicons-halflings.png"); to?
In short, if you use Rails assets pipeline all your assets will be compiled to /assets folder. There is also an option to change the folder name. Please refer to the guide for more details.
If you use scss with sass-rails gem there are helper methods asset-url and image-url that can help you manage with assets path for your CSS.
Lastly there are a couple gems you can use to include bootstrap in your Rails app:
https://github.com/seyhunak/twitter-bootstrap-rails is a less version (Bootstrap is built with less). It requires less-rails gem and https://github.com/thomas-mcdonald/bootstrap-sass
Yesterday I decided to give Foundation a try on one of my web apps. Everything worked fine as I was in localhost, but when I pushed the new changes to my EC2 instance, continuing to follow the Zurb Foundation instructions, I ran into this error:
Sass::SyntaxError in Home#index
Showing /var/www/brain_db/app/views/layouts/application.html.erb where line #18 raised:
File to import not found or unreadable: foundation/foundation-global. Load path: Sass::Rails::Importer(/var/www/brain_db/app/assets/stylesheets/foundation_and_overrides.scss) (in /var/www/brain_db/app/assets/stylesheets/foundation_and_overrides.scss)
As a newbie to Ruby on Rails and Foundation I'm really unsure of how to resolve this problem. I found many people with similar problems through a Google search, but their situations were slightly different which makes this hard for me to diagnose. Any advice?
I was getting this same error, and it turned out that I just needed to restart my local development server.
This is a result of running rails g foundation:install with a different version of foundation than the one you have installed. foundation-global is no longer imported as part of foundation_and_overrides.scss.
Make sure you have the latest version and re-run rails g foundation:install. Just be careful when it offers to overwrite your application layout file - if you had modified that file. Keep the old file somewhere and merge the changes.
If you are using sass then have you renamed your application.css to applications.scss and have you imported the file #import "foundation"; and one more point if you are using the gem 'zurb-foundation', '~> 4.0.0' then you have to place it under assets like this
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
# Add Foundation Here
gem 'zurb-foundation', '~> 4.0.0'
end
I also had this problem with Foundation + Bower + CodeKit.
I fixed it by replacing the following relative paths in app.scss:
BEFORE:
#import "_settings";
#import "foundation";
AFTER:
#import "_settings";
#import "../bower_components/foundation/scss/foundation";`
And also replace this in settings.scss
BEFORE:
#import 'foundation/functions';
AFTER:
#import "../bower_components/foundation/scss/foundation/_functions";
Something is the matter with your zurb-foundation gem installation. There is supposed to be a file called _foundation_global.scss in the gem's directory which contains all the default global variables. You'll get this error if that file is missing.
Reinstalling the gem should fix you right up, in your app's directory run:
gem uninstall zurb-foundation
bundle install
If that fails, manually installing the Gem (gem install zurb-foundation) might work as well.
I experienced this problem today when updating zurb-foundation to version 4. It may be that your EC2 instance has a later version of Foundation installed. If so, I recommend updating your local development environment. My experience doing this might help ...
It seems that the #import 'foundation/foundation_global'; at the head of the foundation_and_overrides.scss, is no longer required. Instead, a single #import 'foundation'; at the foot of the same file is required.
Also, I had to change my application.js file to include only the lines (relevant to foundation);
//= require foundation
$(function(){ $(document).foundation(); });
I had tried to re-run the Foundation generator that is recommended here but it seems to assumes that it is working on a new project and simply appends the new JavaScript method, as opposed to replacing the previous.
I'm trying to use Susy as the grid element in a project
http://susy.oddbird.net/
FYI I'm also using the following libraries
Compass
Assetic
Symfony (2.x)
Ubuntu (10.4)
When I try to import susy in my sass file
#import "compass/reset"
#import "compass/css3"
#import "susy" <- This line causes a server internal error (500)
I'm sure that this is because compass is unable to locate the susy files to include. Can someone with a successful installation please tell me where these susy files should be located? After installing the compass-susy-plugin using gem installer I can see the following...
ubuntu#ubuntu-desktop:/$ locate susy
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy/bootstrap.rb
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy/clean.rb
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy/config.rb
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy/src
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy/src/_base.scss
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy/src/_defaults.scss
/home/ubuntu/.gem/ruby/1.9.1/gems/compass-0.11.5/examples/susy/src/screen.scss
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy/bootstrap.rb
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy/clean.rb
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy/config.rb
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy/src
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy/src/_base.scss
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy/src/_defaults.scss
/var/lib/gems/1.8/gems/compass-0.11.5/examples/susy/src/screen.scss
It only seems to have saved the susy files into the examples folder - should it also have copied them into the 'frameworks' or libs folder (it hasnt)?
Or is the above correct - in which case how do the 'import' decelerations in the compass file relate to (from the files system POV) the sass files themselves?
BTW: Everything is working great except for this one issue.
P.S
If someone with a rep of over 1500 want to create two new tags then 'Assetic' and 'Susy' should be attached to this post
It looks like the susy gem didn't install properly. I uninstalled/reinstalled and the gem now shows up when I do a gem list as compass-susy-plugin.
Everything now works - I would add that I also needed to add the line require 'susy' to my compass configuration.