Can someone point me to a Maven dependency I can add to my POM to minify a file using modern CSS?
Before you say to use com.samaxes.maven:minify-maven-plugin, note that it breaks calculated values: https://github.com/samaxes/minify-maven-plugin/issues/161
In fact any CSS minifier based on YUI Compressor will break calculated values: https://github.com/yui/yuicompressor/issues/268
And com.samaxes.maven:minify-maven-plugin/YUI corrupts the file if it contains certain sequences such as the end of a comment */*… (such as found in minified Bootstrap Reboot): https://github.com/yui/yuicompressor/issues/313 .
So is there no CSS minifier for Maven that works with modern CSS?
It's been a while since I've developed in Rails and I'm having trouble getting any scss stylesheet to work on my freshly created rails app.
layouts/application.html.erb has the default <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> at the top.
For testing purposes, I created a main.scss file in assets/stylesheets/ that looks like this:
* {
border: 1px solid black;
}
I thought the application.scss file is supposed to grab all the stylesheets in it's folder and child folders but it's not. (Oddly, the .js files load just fine.)
I've tried RAILS_ENV=production rake assets:precompile but it didn't do anything. Could someone explain what it even does?
I've tried adding *= require main and *= require main.scss to application.scss. I even changed the file ext to css for both files. The only way I've gotten any css to render is by directly adding the code to application.scss, which I don't want to do.
Please help me with this.
EDIT 1
I'm going to add some more info since I'm getting generic answers. I mentioned that it's a fresh rails app so the basic things are already pre-generated. This is how my application.scss looks:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require main
*= require_self
*/
Still, nothing works
/*
*= require_tree .
*= require_self
*/
Add the above to your application.scss or application.css.scss file
Looks like the only way I can get it to work is by adding #import main; to application.scss. It seems like the styles end up being used on every page (is this the default in rails?).
This is not my ideal solution but it's the only thing I've been able to do to get any styles to work via requiring methods.
in your application.css, try adding
*= require main
*= require_self
hope this helps
I could not get the above answers to work but I think I found an easy work-around that makes Rails act the way expected.
In your HEAD section add
<%= stylesheet_link_tag params["controller"], media: 'screen' %>
And now css/SASS/Scss files in app/assets/stylesheets/ will load.
Sadly, you'll still need to precomile things. Grr.
I thought the application.scss file is supposed to grab all the
stylesheets in it's folder and child folders but it's not. (Oddly, the
.js files load just fine.)
By adding *= require_tree . to application.scss I think it should load all of the files recursively like you expect.
When Using Rails 4:
Make sure your Gemfile is using the sass-rails gem
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
You've created app/assets/stylesheets/main.scss, great!
Now update application.scss to include it:
#import "main";
You'll also need to include various gem stylesheets this way too:
#import "bootstrap";
You shouldn't have an application.css file - if you made one, remove it.
It's a bad practice to include stylesheets recursively, since order does matter, and conflicting styles will cascade, thus clobbering each other. I don't have an answer to your question on recursion, since it's not something I've done since upgrading to Rails 4
For me this was the solution
Is to link css file to your root
Also make sure your application.html.erb has this line:
<%= stylesheet_link_tag 'application', media: 'all' %>
In my case with Rails 6, the styles from app/javascript/stylesheets couldn't be loaded in production (Heroku). The styles were only work in development.
So I add this gem in Gemfile and install it.
gem 'jquery-rails'
Then my app can load the styles both in development and production environment.
New to rails. I'm experimenting with adding the Twitter Bootstrap CSS to my project to make my layout look nicer.
However, I think some of the CSS rules from my default Rails app is interfering with the Twitter Bootstrap CSS.
Is there a way where I can remove the existing CSS assets, and just keep using the Bootstrap ones?
If you generated a scaffold (which I assume you did), you can remove the default styling by clearing app/assets/stylesheets/scaffold.css.scss. If you delete the scaffold.css.scss file and you generate a new scaffold, the default stylesheet will be added again, this can be alleviated by simply clearing the file of its contents.
Do not delete application.css
You should find where the default css files located(assets/stylesheets),remove them.
...of course don't remove the application.css
I'm trying to figure out how to correctly define a stylesheet (say...bootstrap_and_overrides.css.scss) to override all other stylesheets in my Ruby on Rails app. The thing is I want to leave all {wrap}bootstrap theme files I'm using intact so I can upgrade when updates come out. So all changes I may need to make should be done on this "overriding" css file.
Maybe something in application.css.scss?
*= require_self
*= require_tree .
*/
I've tried declaring this specific stylesheet after require_tree but nothing. I'm sure there are some concepts I'm not fully grasping. Any help is greatly appreciated.
I am not sure about using Rails specifically, but the definitions in the last stylesheet (added to the page last) will trump preceding styles.
You need to ensure that the override stylesheet contains equivalent css selectors to ensure the styles will be overridden.
I'm wondering what application.css is for? If I'm creating a new file for header and footer so all my pages can just include header and footer page, do I just put all common css syntax in application.css? or should I just create a new custom.css and place all the syntax that is going to be used throughout my application like body, html, ul, a, tags and stuff?
Thanks
What is application.css for? Have you read the Rails guide on the Asset Pipeline? That page alone answers your "what's it for?" question and more very clearly and thoroughly.
As for placement of your styling, the guide mentions:
The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (i.e., .coffee and .scss files are not automatically included as they compile to JS/CSS):
This means by default Rails is only going to compile an application.css file for you. Sure, you can put your styling in app/assets/stylesheets/custom.css and include it with
/**
*= require custom
*/
but your "custom" styling sounds like application styling, so it seems it'd be best to just drop it all into application.css and let Rails do what it does by default.