I'm using RubyMine together with a ruby/rails project where .scss files are joined to one applcation.scss and then compiled to one application.css file which is served.
I would like to serve the .scss file too, but just in the development so I will be able to edit the .scss file in chrome dev tools without the need to refresh and won't need to go back to the ruby mine to update the .scss file.
How do I serve the application.scss too then?
If you're using Rails 4, you can install and follow the instructions for the sass-rails-source-maps gem. Then you should be able to see/edit .scss files in Chrome's web inspector.
Related
I am using webpacker for my asset pipeline in my rails app. I installed active admin as per the documentation. I moved the styleheet file and javascript file active_admin.js.coffee and active_admin.css from app/assets/stylesheets and app/assets/javascripts to vendor directory. To load these files from vendor directory I added following lines in my config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( active_admin.js active_admin.scss )
But still rails is not able to find the file in my assets pipeline. It throws me error whenever I visit /admin path.
Sprockets::Rails::Helper::AssetNotFound in ActiveAdmin::Devise::Sessions#new
Showing /home/rabin/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/activeadmin-1.3.0/app/views/layouts/active_admin_logged_out.html.erb where line #9 raised:
The asset "active_admin.css" is not present in the asset pipeline.
I searched for entire stackoverflow but still can't figure out the problem.
ActiveAdmin on version 2.7.0 added Webpacker support, so after updating to this version (or above) according to docs ActiveAdmin will generate the needed files for you. Write:
rails g active_admin:install --use_webpacker
If you are not using Device add --skip-users after --use_webpacker
Unlike the usual generation ActiveAdmin will generate:
app/javascript/stylesheets/active_Admin.scss
app/javascript/packs/active_admin.js
This will download the needed js and CSS file with yarn, and update the Webpack to use jquery on all the pages (if you already set jquery, it will be worth removing the duplicate code)
If you updating from Sprockets don't forget to remove the previous js and CSS from assets or vendor folder.
It should have been inside vendor/assets directory.
So my company updated Rails and Ruby versions, after that only few images became broken. They all defined in scss with image_url("frontend/image_title.png"), but only like 4 of them aren't showing anymore, server gives 404 error.
All of them used as a background images.
What could be a problem and a solution?
Have you tried precompiling the assets ?
The call too image_url is done once during precompilation of assets so it could be that the assets in production still have old paths.
To precompile run the following command:
bundle exec rake assets:precompile
Looks like i will always answer my own questions :)
The problem was that there are few .scss files that was compiling with assets pipeline, and those .scss files had some same code, like scss variables and reset code, which i decided to move out of them to separate file, called reset.css.scss and import that file into those .scss files with #import function, which works bad with Rails *= require methods.
After moving that code back to .scss files and removing the #import stuff, everything worked fine.
I'm new to Ruby on Rails and SO. I have a task to make CSS changes in an existing project built on Ruby on Rails. I searched online and found that .scss files auto compile to .css. So I started making changes in .scss files. But, when I edit and make changes in the files, it is not getting reflected on the browser. I tried restarting the rails server using command rails s, clearing browser cache/cookies, deleted assets folder inside public still, the changes are not getting reflected on the browser.
Finally, I deleted the tmp folder and restarted the rails server. Only then was I able to see my changes on the browser. I want to know if there is an easier way to see the changes directly on saving the scss file?
PS: I have development environment set up and my Gemfile has rails of version '>= 5.0.0.1' and I have sass-rails to '~> 5.0'.
Please let me know if any additional information is required
It was a problem with WSL. we have just shifted ROR project folder outside of 'C:\Users\username\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\home' and it worked.
I have some stylesheets in a subfolder /app/assets/stylesheets/themes of my rails app. These assets have the file extension .css.scss extension.
In my development environment I've been addressing those files with:
asset_path 'themes/theme-name.css.scss'
However, when I go to production Rails won't find those files. When I use just .css extension it seems to be working okay:
asset_path 'theme/theme-name.css'
My question is: what is the correct way to address asset files with multiple extensions?
Thanks for help
The correct way should be:
stylesheet_link_tag 'themes/theme-name'
If Rails is configured correct, the assets pipeline will figure out the file extensions itself .
Do you have sass loaded in your Gemfile?
I have forked a rails project and found that is uses SASS, I want to remove SASS and write my css by hand.
Can i just delete the folder:public/stylesheets/sass? Remove the gem from the gemfiles, and then continue with the .css files that sass has generated?
Since there is already generated SASS, the method you suggest is the best. You do not want the SASS files overwriting your CSS.
The files with .css extension have no treated by gem sass, you can write your .css file think to change stylesheet_link_tag in layout for load your .css