4

New to Rails so bear with me...I was looking at a manifest file (application.js) today while researching the asset pipeline and was curious how the directives such as //= require jquery are being read. Is this something Sprockets is doing in the background? How? Why must the directive be commented out first, and the equal sign added? If I uncomment the directives and load the application.js file in my broswer, I no longer see the jquery library contents. Just curious how this is working in the background.

Also, when I add my own custom css stylesheet, do I add a require directive in the application.css manifest file, or do I add the stylesheet link such as <link rel="stylesheet" type="text/css" href="mystyle.css">? Or do I do both? I'm assuming I shouldn't add css directly inside of the manifest file...

Thanks!

Craig Ness
  • 83
  • 1
  • 6

2 Answers2

3

Dont know how much you know, so will try to explain in details.

Rails stores our assets (like images, css, js files) in separate places, so its all in order and better for us - devs, to use. So thats called Assed Pipeline. When Rails loads those assets, say, css files, it creates one big file from all our app files, to avoid multiple calls. And Manifest is like a map or rules for Rails which files to include in that big css file and this *= is whats telling Rails what exactly to include (I consider it as a Rails syntax). So when you have something like this:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree . 

require_tree . tells Rails to grab all files from the javascripts folder, while //= require jqueryand others directs Rails to special cases - assets, usually used by your gems (those files you never keep in your javascripts/stylesheets folders, so //= require_tree . cant see them).

When you add your on css file, you just add it in the stylesheets folder and require_tree informs Rails to include it in the big picture. But Rails has a nice feature - scaffolding. You scaffold your object with command rails g scaffold User and Rails creates everything for you - views, controller, model, tests (and who knows what else :) ). So in this case you don't even need to create your css file, just insert css rules into it and Rails will find it due require_tree .

A bit different story with sass files:

If you want to use multiple Sass files, you should generally use the Sass @import rule instead of these Sprockets directives. When using Sprockets directives, Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.

So if you will be using Bootstrap (probably will), this is a important to know as well.

Hope this helps

Julius Dzidzevičius
  • 10,775
  • 11
  • 36
  • 81
1

How? Why must the directive be commented out first

Because this is sprockets directive. It is executed well before any js/coffee in that file gets the chance to run. And css is not "runnable" code at all. How do you make this kind of code not produce any errors? You comment it.

... and the equal sign added?

To tell these special directives apart from other, "regular" comments, which may be in that file.

I'm assuming I shouldn't add css directly inside of the manifest file...

Why not, go ahead. Although you may want to put any custom code in separate files for reasons of code organization. But technically, there's no problem here.

Also, when I add my own custom css stylesheet, do I add a require directive in the application.css manifest file

No need, require_tree . will find and include your file.

or do I add the stylesheet link such as <link rel="stylesheet"type="text/css" href="mystyle.css">?

Nope, don't do that.

Sergio Tulentsev
  • 226,338
  • 43
  • 373
  • 367