I am going through a rails Udemy course, and we are using bootstrap. The instructor is on an older version and I started using the most recent version. Before long I discovered they are very different, so I wanted to switch to the correct version for the project. I have done gem uninstall gem bootstrap, and rails assets:clean, and went as far as to switch back to main and delete that git branch. I then updated the gemfile to install bootstrap 4.0.0, and ran bundle install. Gemfile lock reflects the changes. I then copied the instructors provided source files for the views we had been working on and the application.scss file. It has not worked. The scss in the rails app is being completely overridden by some trace of bootstrap 5.2. I know this because I inspected the page in the chrome dev console and in the sources there is this link which references the version.
/* line 1, ../../.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/bootstrap-5.2.0/assets/stylesheets/bootstrap/_root.scss */
I have restarted the rails server multiple times, but there is no effect. I have navigated to that folder in the rbenv directory and the bootstrap-4.0.0.alpha6 version is listed there, not the 5.2.0. However, the 5.2.0 version is persisting in what is on the browser. No changes that I make in the scss file have any effect. I tried changing all the colors to random ones, but none show up. There are no error messages to share. The CSS simply has no effect and appears to be overridden by this file that I cannot find anywhere in my rails project or on my system. Thank your for any guidance to fix this.
I found an answer.. I had to use rake assets:clobber to clear out precompiled files that had the bootstrap 5.2.0 in them. I did that and then rake assets:precompile and it instantly fixed it.
Related
My problem: I am able to build a nice website locally using Jekyll and the Skinny Bones theme, but when I upload my contents to GitHub the build fails.
System information: Running macOS 12.5, Jekyll 4.2.2, most up-to-date version of gems (managed by Bundler). Clean install of everything this morning.
What I've done:
Downloaded all relevant software and built out a GitHub Pages repo
per these instructions and the GitHub Pages instructions.
Cloned the project (let's call it project.github.io), unzipped the Skinny Bones theme inside that directory, got everything set up.
The directory now looks like:
Gemfile
Gemfile.lock
README.md
jekyll
_site
_pages
_layouts
a whole lot more
I build everything how I wanted it, navigated to the jekyll folder, and built it using bundle exec jekyll build and checked it interactively using bundle exec jekyll serve. Everything worked well, no errors, functioned as expected.
I then navigated to the project.github.io directory, added everything and pushed it successfully, then got the settings configured for GitHub pages (e.g., set it to the right branch, etc.).
This is where the problem occurs. I notice that the build failed, examined the error log, and see this in the output, two lines:
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'jekyll/css/main.scss': File to import not found or unreadable: variables. Load path: /usr/local/bundle/gems/jekyll-theme-primer-0.6.0/_sass on line 10
/usr/local/bundle/gems/jekyll-sass-converter-1.5.2/lib/jekyll/converters/scss.rb:123:in "rescue in convert": File to import not found or unreadable: variables. (Jekyll::Converters::Scss::SyntaxError)
The build has therefore failed, and my pages are not rendering. Furthermore, these are supported dependencies, per the GitHub documentation. I have verified that I have the same version of theme-primer installed.
Can anyone help me diagnose this problem?
I have solved this issue. The problem is that even though I was pushing all material from the parent, I was building locally from a /blog subdirectory inside my project.github.io parent directory. This was cloned directly from GitHub. When I tried to build locally from the parent, I got the same error as I was getting on GitHub, which tipped me off to what might be going on.
When I moved everything up to the parent directory level and rebuilt from parent, everything worked as expected and just as it did from initially building inside /blog. I pushed to GitHub, the build process completed, and the GitHub page was served.
Hopefully this will be helpful for someone else who might have this issue. Jekyll is adamant about directory hierarchy.
I've installed Bootstrap 4 Instant Theme on my dev machine, which has DNN installed. I can get the theme up OK.
I've installed Node.js and that looks OK.
I've run npm ci in the app/theme folder, and that seems to have run OK. There is a webpack.config.js file in the folder.
I don't get the "run webpack" instruction!
When I make changes to the _variables.scss file and save and then refresh my page, I don't get the theme updates.
The Client Resource Management was already disabled.
I've cleared the cache and restarted the application.
What am I missing, or what is missing from the documentation that it assumes I know?
Just to be sure: did you compile the scss? As Bootstrap 4 uses SASS, the scss need to be compiled in order to take effect.
Try
npx webpack --config webpack.config.js
cmd is enough to run the command. I use a .bat with this to quick compile.
run npm run webpack from commandline.
I have extended the instructions and explained the step better. I hope you were able to move on by now.
João Gomes, thx for your quick answer =)
I tried to upgrade from Bootstrap 4 Alpha 6 to 4.0.0 final version for my Rails 5 project, I'm sure the v4.0.0 gem has been installed (I also uninstalled the alpha version gem), but when I run my project (dev mode), I found the generated Bootstrap CSS files are still based on the Alpha version.
gem 'bootstrap', '~> 4.0.0'
Other than uninstalling the old gem and install the new bootstrap gem, do I need to do anything else for the upgrade? Download the physical v4.0.0 files and replace the old files in my project?
You can have look at this article:
How to update a single gem conservatively
Option 1
This will work if all dependencies for the update are already satisfied.
Find out the version you want to update to
Change it directly in Gemfile.lock
Run bundle install and see if that worked
Option 2
This will work if the gem has no shared dependencies with other gems.
Find out the version you want to update to.
Add that version explicitly to the Gemfile with , '=1.2.3'
Run bundle install
Remove the explicit version number again
Run bundle install once more
Option 3
This should always work.
Run bundle update GEMNAME
Run git diff Gemfile.lock and notice all the updates you didn't want
Revert the unwanted changes to Gemfile.lock you don't want (manually or by staging changed lines one-by-one), leaving only the desired updates.
Run bundle install and see if that worked
Option 4
There are persistent rumors that you can update a single gem by calling bundle update --source GEMNAME. However no one seems to know how and why this works, it's not a documented feature of Bundler. It might be an unintended side effect of something else.
I believe this command will try to update GEMNAME and GEMNAME only. If this leads to unmatched dependencies to other locked gems, it will fail.
If you use this option, be sure to git diff your Gemfile.lock to see if the changes are what you expected.
Option 5
Bundler >= 1.14 has a --conservative flag. Using the conservative flag allows bundle update GEM to update the version of GEM, but prevents Bundler from updating the versions of any of the gems that GEM depends on.
Credits To Author: Henning Koch
Try to keep Ruby dependencies in your Gemfile and JS/CSS ones elsewhere. Node+Yarn is a good way to do that.
If not already there
brew install yarn
Then in config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
Now you can do this in your console:
yarn add bootstrap
It should have create a node-modules directory if not already there.
Then just add bootstrap to your JS/SCSS files
JS
//= require bootstrap/js/src/index
CSS
#import "bootstrap/scss/bootstrap";
I'm pretty new to whole Grunt and SCSS workflow stuff and recently configured Grunt with a WP theme development that run under MAMP. Installation of Node, NPM, Grunt and its dependencies went smooth. However, when i make a change on .SCSS files, it doesn't seem to be reflecting the changes to the .CSS files due to following warning from compass:
Running "compass:app" (compass) task
LoadError on line ["55"] of /Library/Ruby/Site/2.0.0/rubygems/core_ext/kernel_require.rb: cannot load such file -- susy
Run with --trace to see the full backtrace
Warning: ↑ Use --force to continue.
Aborted due to warnings.
Not exactly sure what's up but obviously a communication issue between Ruby and Compass?
Whether it be incorrect version mapping or paths..?
I researched and attempted following:
Uninstalled the current and installed new Ruby
Installed RVM (didn't use it, just installed it)
Upgraded compass to the latest version 0.12.2 and made sure this version is reflected in package.json for grunt.
Any pointers and advise highly appreciated!
I don't know if this is an option but you might look at PrePros (https://github.com/sbspk/Prepros). I tried for a while to setup the raw/core setup you are working with but it was just always quirky - not to mention super tedious to setup. PrePros takes all the pain away! Just a suggestion.
Related/Reference link: https://stackoverflow.com/questions/19866550/sass-haml-compile-on-prepros
I've been experimenting with Jekyll, and I can't get Jekyll to regenerate file changes (jekyll --server --auto). I'm using Sass, but I can't even get it to work with normal css. I've tried plugins, I've tried pulling other people's repos and just using there code, but no luck. What am I doing wrong?
It's a problem with the gem. An easy fix is:
gem uninstall directory_watcher
gem install directory_watcher -v 1.4.1
Here's a link for reference: https://github.com/mojombo/jekyll/issues/970
I had a problem like this when I installed a sitemap plugin. Once I removed the plugin, the site started generating again.