I am trying to install a new gem (https://github.com/froala/wysiwyg-rails), it has css dependencies that I'm trying to call using sass-rails but I only see my #import instruction in the rendered css.
The installation worked fine, since I did bundle install, and I can load the js. The css files are in the right folder in my ruby, but I do not succeed in having the css imported.
I am using this line of code to get the css:
#import 'wysiwyg-rails/froala_editor.min.css';
Is there anything else I have to do with sass-rails to be able to access the files with an import.
Not really an answer, but I ended up using the bower installation and I could access my css files.
Related
I'm trying to install "wysiwyg-rails" and "toastr-rails".
And I also tried to install alternative gems like "Summernote" to avoid the error, but the same error happens "Module not found". The CSS files are loaded successful, but the JavaScript file doesn't load.
Installing the Summernote gem using:
application.js:
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("summernote/summernote-bs4.min")
aplication.scss:
#import "bootstrap";
#import "summernote-bs4";
Everything is configured and when I try to load the page the Chrome console shows:
application.js:9 Uncaught Error: Cannot find module 'summernote/summernote-bs4.min'
Application.js line 9: `require("summernote/summernote-bs4.min")`
And the server terminal displays the message:
Module not found: Error: Can't resolve 'summernote/summernote-bs4.min' in '/d/myproject/app/javascript/packs'
I'm using Ruby 2.7.0p0 and Rails 6.0.2.1 and I have jQuery and popper installed by yarn.
Usually, gems are meant to be used with Sprockets (the assets pipeline). Gems that support Webpacker integration usually have a matching yarn/npm package.
I haven't even found a way to make a gem with JavaScript assets that are automatically recognized by the Webpacker compiler. You have to add a JavaScript package or copy the needed JavaScript into the JavaScripts folder.
When using Webpacker, it's easier to add third-party code using npm/yarn packages instead of Rails gems if you need assets.
I'm trying to wrap the bootstrap-sass gem inside another gem (let's call it my-engine). Along the way, I'm building a small Rails application to test things out. As a first step, I wanted to make sure I could get bootstrap-sass working directly in my Rails application. The Gemfile for the Rails app looks like this:
gem 'bootstrap-sass', '3.3.1.0'
gem 'my-engine, path: "~/dev/my-engine"
This works fine. The bootstrap assets are loaded into my Rails application and everything looks good. Now, I want to take bootstrap-sass out of my Rails app and let it load through my-engine. So, my Rails application Gemfile now looks like:
gem 'my-engine, path: "~/dev/my-engine"
The .gemspec for my-engine has:
spec.add_runtime_dependency 'bootstrap-sass', '3.3.1.0'
I can re-bundle the my-engine gem with no problems. I can re-bundle the Rails application with no problems. However, when I refresh the page of the Rails app, I get the following error:
File to import not found or unreadable: bootstrap-sprockets.
That break occurs when sprockets is trying to build the application.css file. Sometimes this will pass and I'll get a different error about missing the bootstrap.js javascript file when the application.js is being built.
Why is this happening? I'm wondering if it has something to with the fact that I'm developing the gems locally and haven't published them, although I'm not sure why that would affect bootstrap-sass which is published. I'm using bundler 1.5.3.
Make sure 'bootstrap-sass' is required in your engine. One sensible place to do this is in your lib/my-engine.rb file:
require 'bootstrap-sass'
Adding the bootstrap-sass gem as a runtime dependency in the .gemspec isn't enough when you're trying to wrap gems.
As you want to use more and more scss/js/coffeescript libraries, you may want to consider moving to bower vs gemfiles as the source for bootstrap-sass-official. We use bower-rails for rake tasks and auto-configuration. It's a really lite config/rake task layer over standard bower.
Addressing your answer, bootstrap problems via the gem was one of the reasons I switched our engine over to just bower assets. We now import bootstrap-sass-official and have full control, note however that for sass files you will need to import the longer path to the source file, i.e. in our engine _application.scss:
# our custom variable overrides
#import 'overrides/variables';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
NOTE: if you want your app sass variables to override engine and sass variables, make sure your engine has _application.scss not application.scss, the leading underscore is critical for variable context/scope.
Thinking ahead, you may need to ignore bower transitive dependencies as we did.
(i.e. some dependencies may use 'bootstrap' while others use 'bootstrap-sass-official' etc)
We use it like this in our .bowerrc such as the following:
{
"ignoredDependencies": [
"bootstrap",
"bootstrap-sass",
"bootstrap-sass-official"
]
}
In conclusion
We have been using this for several months with success. bower-rails will install the dependencies in /vendor/assets and if referenced in your engine, you won't need to reference them at all in your application project. It has been fast and easy to maintain/add/update libraries and know exactly how files are included.
I was just fiddling around with some things and happened to run bundle install on my ruby on rails app. I noticed that bootstrap updated from 3.1.1 to 3.2.0 and now when I go to generate certain views, I get this error:
ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap/glyphicons-halflings-regular.ttf"):
Didn't happen until this gem update. Any suggestions? I've tried explicitly using 3.1.1 in the Gemfile and running bundle again, but this doesn't help. It looks just like a simple routing issue, but idk why this would have only changed during the gem update.
My problem was with the order I was importing bootstrap in my application.css.scss file. Make sure the order goes:
#import "bootstrap-sprockets";
#import "bootstrap";
For anyone who else can't get an answer on this, I manually changed this file:
/home//.rvm/gems/ruby-2.1.1/gems/bootstrap-sass-3.2.0.2/assets/stylesheets/bootstrap/_glyphicons.scss and took out the $icon_path or whatever it was and replaced it with "../assets/bootstrap/
Fixed the problem thereafter.
I had the same problem like you. After some research these are the most important things i found out:
1) Since bootstrap-sass version 3.2.0 the asset directory moved from vendor/assets to assets/
source: Issue with upgrade to bootstrap-sass 3.2.0
2) The font files from customizer are probably corrupted and should be downloaded directly from the Bootstrap homepage.
source: Bootstrap 3 Glyphicons not working
As you already said; change the version back to 3.1.1.1 should do the trick. I uninstalled the gem via:
gem uninstall bootstrap-sass
Then I changed the version defined in the gemfile and reinstalled it with
gem install bootstrap-sass
bundle update
This might help people facing the same issue.
I have a working Rails 4.0 + Bootstrap 2.3 application. Now I want to update to Rails 4.1.
After updating the gems and starting the server, I receive this message:
Sass::SyntaxError - File to import not found or unreadable: bootstrap-responsive.
It point to a line in bootstrap_and_overrides.css.scss where I have this:
#import "bootstrap";
#import "bootstrap-responsive";
Both files are in the assets/stylesheets folder. When I remove the last import, the application starts, but I miss a lot of styling. What is going wrong here, any ideas?
I made 2 mistakes with this: first I did a bundle update instead of bundle update rails, so that all gems where updated, also the bootstrap and sass related gems. The second error was that I didn't have specific version numbers for the bootstrap and sass related gems in my Gemfile.
The solution was simple: remove the branch, create a new one, check Gemfile.lock for the current versions of all bootstrap and sass related gems and add these to Gemfile. Then do a bundle update rails and sit back and enjoy!
I am using ROR with bootstrap-sass gem.
It is quite strange, but I can't use some of stylings that are listed here:
http://twitter.github.com/bootstrap/components.html#labels-badges
I thought it is because of my not actual bootstrap-sass gem - it was 2.0. So I updated this gem to 2.2.2.0, it installed well, but it didn't help.
As I checked the stylesheet files in source of my page, on top of localhost/assets/custom.css?body=1, there is header:
/*
* Bootstrap 2.0.0
*
(...)
So do I need to update bootstrap files separately? And if, where I can find them?
EDIT
I made some actions:
-downloaded bootstrap by hand and put it to vendor/assets/stylesheets/bootstrap (I created the bootstrap folder)
-changed import "bootstrap" to import "bootstrap/bootstrap"
it worked, but I had objections if it is a good practise, so I made:
-gem clean
-gem update
-bundle install
-deleted the vendor/assets/stylesheets/bootstrap - everything what I put
-changed back to import "bootstrap"
and... it seems to work.
You might try to precompile in development environment.
bundle exec rake assets:precompile RAILS_ENV=development
But I am really not sure because I use twitter-bootstrap-rails gem. It works wonderfully.
you just need to clean up the previous gems although it is not recommended if you have multiple projects with different versions.
this blog post might help ...cleaning-previous-versions-for-gem-like.html
I made some actions: -downloaded bootstrap by hand and put it to vendor/assets/stylesheets/bootstrap (I created the bootstrap folder) -changed import "bootstrap" to import "bootstrap/bootstrap"
it worked, but I had objections if it is a good practise, so I made: -gem clean -gem update -bundle install -deleted the vendor/assets/stylesheets/bootstrap - everything what I put -changed back to import "bootstrap" and... it seems to work.