I am trying to solve a problem in my Rails 4 + Spree app and a post suggested me to convert my all.css file to all.scss (sass).
How do I convert
*= require spree/frontend
*= require_self
*= require_tree .
to #imports?
I did the
#import "spree/frontend";
Which was pretty straightforward, but now my app is "unstyled" and I am positive it is because of the other two directives.
Thanks!
'require_tree' will tell asset pipeline to include all the files within the specified directory. By default it is set to current directory with . (i,e dot). Refer to http://guides.rubyonrails.org/asset_pipeline.html for more details.
After changing the filename of application.css to application.scss, \*=require_tree . can be replaced with #import "/\*" (Example:- on a mac the statement would be translated to a path something like /Users/user_name/app_name/app/assets/stylesheets/*) . The * here imports all the files within the stylesheets directory. Refer to Is it possible to import a whole directory in sass using #import? for more information.
This should solve your problem.
But, the suggested way to go about this is to create another file with a .scss extension that contains all the imports you want and use \*=require_self and \*=require_tree . within the application.scss file.
Related
I am trying to migrate to Bootstrap 4 in my Ruby on Rails project, following the github installation guide
It recommends that in my application.scss file, I remove *= require_tree
However, when I do this, none of my custom CSS files appear. If require_tree DOES tell the asset pipeline to include all of the specified files in the directory, how else would the asset pipeline know to do this?
I've been trying to find an answer to this problem and haven't found anything.
OK, you would try to work with css and scss at a time, Right? You can do this the several ways like if you need to use only one file like application.scss then you can rename the file again e.g application.css.scss then for scss you would follow this
#import "bootstrap";
...
then for custom css above in the #import variable
/*
*= require custom
*= require custom_another
*/
make sure this custom file is formatted with .css and it's inside assets/stylesheets folder.
For saas file will use #import & for css file will use *= require.
Now if you need to use separate files for css & scss then it would look like this application.css
/*
*= require custom
*= require_tree .
*= require_self
*/
you can leave that application.css and for scss you can create a custom file inside assets/stylesheets like custom.scss then
#import "bootstrap";
There are already similar questions on SO, but not enough clear responses to understand the following issue.
My goal is to setup Rails 5 with Bootstrap using Bower.
Using Bower I installed Bootstrap in the the folder:
vendor/assets/bower_components/bootstrap-sass
Then, I updated initializers/assets:
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Then I added the gem 'sass-rails' to Gemfile and updated application.js:
//= require jquery
//= require bootstrap-sass/assets/javascripts/bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The assets for JS seem to be working well: if I load http://localhost:3000/assets/application.js
I can see that the Bootstrap JS part has been added there.
The problem is about Sass (SCSS):
I added bootstrap-sass/assets/stylesheets/bootstrap into application.css.scss but with no success:
/*
*= require_tree .
*= require_self
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
in fact if I load http://localhost:3000/assets/application.css I see:
/*
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
(the folder specified on the #import is containing many _*.scss files and a mixins folder)
The questions are:
Do you have any ideas why this is not working?
should not I see on assets/application.css all the CSS precompiled?
PS:
Any resource to understand the issue would be much appreciated.
Move the import, so it's outside the /* .. */
/*
*= require_tree .
*= require_self
*/
#import "bootstrap-sass/assets/stylesheets/bootstrap";
[Removed misleading instructions to use require instead of import, as I was wrong.]
In addition to the accepted answer, if you look into the bootstrap-sass/assets/stylesheets directory, you'll notice that there is no file bootstrap.scss but rather one prefixed with an underscore.
Also, usually it's better to import only modules you actually need from the bootstrap-sass/assets/stylesheets/bootstrap/ directory instead of the main _bootstrap.scss file.
I'm trying to use Bootstrap Combobox for rails.
The instructions say that:
*"You will need two files included in your HTML in order for this to
work:
js/bootstrap-combobox.js
css/bootstrap-combobox.css*
I realise that they need to go in the application js and application css respectively, but I think that I'm getting the syntax wrong because I'm getting an error.
This is how I'm adding to application.css.scss:
* require css/bootstrap-combobox.css
This is how I'm adding to application.js:
//= require bootstrap-combobox
What error are you getting?
Without knowing the exact error, here's what I suggest:
After you make sure you have a file in your assets/stylesheets named bootstrap-combobox.css, you want your require statement to look like this:
*= require bootstrap-combobox
Your require statement looks fine for the JS assuming you have the file in the assets/javascripts folder.
You can also use //= require_tree . and *= require_tree . to require all files in your javascripts and/or stylesheets folders respectively instead as well.
Check out this section of the Rails asset pipeline for more info.
In my rails application's asset application.css I have the following line
/*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
ul#mainmenu li {
background-color: $mainColor;
}
which includes the file foundation_and_overrides.scss where I defined the following variable
$mainColor: #eba10e;
But when I now try to use this variable directly in my application.css file, it is not translated to #eba10e, so I get lines like this one in the resulting css file:
background-color: $mainColor;
So my question, how can I use the variable in my application.css file?
No, pure CSS does not support variables.
But it will work, if you rename it to application.scss. After that it will be compiled with Sass. CSS is always valid SCSS, so this will work without problems.
Additionally you have to use the #import statement instead of require, so the other files will be imported the ”SASS way“.
I see that in development environment in rails 3.1 the css are loaded in alphabetic order and not in the order I want. I want a particular css file to be at the end so it over-writes any styles given to the class before. How can we achieve that?
You can actually do something like:
/*
*= require 'reset'
*= require_self
*= require_tree .
*/
in your application.css file. This allows you to specify any number of stylesheets, such as a reset, to come before the tree without having to specify each individual file. The single quotes around reset are optional.
Not trying to resurrect an old thread, just thought this might be helpful for some.
It is better to specify the order of each and every files manually:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require reset
*= require groups
*= require the_last
*