I had a Rails 4 app that was loading the css.scss files just fine. Then I did something to break it, I don't know what, and reverting to the last git check-in isn't fixing the problem.
My structure is exactly as rails new [project name] left it, and I've never had to look at how the assets get loaded. Reading up on the asset pipeline just left me more confused.
I'm actually putting all of my styling in app\assets\stylesheets\application.css.scss, which begins with
*= require_self
*= require_tree .
as I believe it should, but (judging from the Chrome developer tools view) the application isn't even getting as far as loading that. So where does a Rails 4 application get told to load app\assets\stylesheets\application.css.scss?
(Yes, I see others have problems with loading the stylesheets, but the advice always seems to be to put the stylesheets where I already have them or to include those lines in the application stylesheet that I already have, so it looks as if my problem is something else).
Related
In every language I can think of, placing the comment decorator at the start of a line will comment out that line of code (without any exceptions).
In rails, in application.js I see some lines starting with // and others starting with //=. I presume lines starting with // are comments and those lines are not executed.
Question
What's the difference between
lines starting with //
lines starting with //= and
lines starting with neither of those decorators?
From here:
Sprockets is a Ruby library for compiling and serving web assets. Sprockets allows to organize an application’s JavaScript files into smaller more manageable chunks that can be distributed over a number of directories and files.
Also:
When it comes to asset bundling, the "Rails way" is webpack for JavaScript and Sprockets for everything else. The default setup in a fresh Rail 6 install, similar to what Basecamp uses, still compiles CSS, images, and fonts with Sprockets.
So basically
lines starting with //= is a sprocket processor directive (and it will get executed)
lines starting with // are simply comments (they won't get executed), and
lines starting with neither are javascript
Can't seem to figure out how to make the asset pipeline play nice AngularJS template files for components which like this:
app.component("chart", {
templateUrl: "./templates/chart_element_tpl.html",
controller: ChartElementController,
bindings: {
accounts: '='
}
});
I've looked at the various posts on this problem here but none of the suggestions seem to work. I always get the 404 error. One of them talks about upgrading sprockets to version 2.x but I am on version 4 already.
I have taken care to make sure my template has a different name than the javascript file as suggested in another post, but none of these things quite seems to do the trick.
FYI, the structure of the assets relevant assets directory is:
app/assetsjavascripts/chart_component.js
app/assets/javascripts/templates/chart_element_tpl.html
It does seem weird to me that an html template is stored in the javascripts folder but that seems to be the way people do it. I also made sure to include the directory in the applications.js manifest with
//= require_tree ./templates
I tried things like assets:clean and assets:precompile and yarn install and restarting the server but none of that seems to solve the problem.
I also have installed the angular-rails-templates gem and required it in application.js, also no help.
It does make sense to me that this is failing because the actual files are versioned etc. in the public directory, but not sure what to do about that so AngularJs can find my templates.
This one is not holding me up, but I'm really curious what is happening.
I have in my application.css:
*= require_self
*= require conversations
and have some styles defined in my conversations.css, but they would not get picked up!
By chance, I renamed to conversations.css.scss and suddenly it started working. I renamed back to .css and it stopped.
I thought you could have either .css or .scss files and they would get picked up by rails (my version is 3.2.11)
Edit: I also tried this for .js files and the same behaviour. As soon as I add .coffee to any .js file, it gets picked up and used, otherwise, it does not.
Has anyone seen this behaviour before? If so, what is going on?
Running Guard with Spin works great to keep my testing fast, except when assets are relevant and need compiling. It seems that the test environments recompiles all assets whenever I change something in them. I've seen examples of deployment scripts that only recompile assets whose source has changed. Can this be done for testing too? Or is there another way to speed up asset compilation for tests?
I'm using a rather specific setup so I'll be happy to supply more information if needed, though I feel the answer from this question might be of use in many more cases than just mine.
You can take a look at this article written two months ago . It seems rather complex task . Nathan has written a gem that precompiles only changes , made to assets . It can be used in development and testing env.
EDIT : Here is another article , related with speeding up our tests . It has a different point of view about js testing .
You can for example avoid adding require_tree in Your application js and css files.
In addition, use proper file extensions - if something is js - then name it like normal js files. Same for css and scss.
You can also precompile assets locally to have it compiled locally on development by command rake assets:precompile - but remember to delete it after tests to see changes in assets next time (it can be generated in vendor folder)
I am sure but you can try:
In application.js file write all js file in tree order like this:
//= require jquery
//= require jquery_ui
//= require jquery.ui.core
So I've started building a gem, which is difficult, but it seems to be working out so far..
Except for one little thing, the assets. I've tried putting them in my lib/assets, app/assets and vendor/assets. But they don't seem to load.
I have a test-app which loads my gem to test it, but nothing seems to work. I have an engine in my gem which I'm sure is being loaded.
What more do I need to know for this to start working?
EDIT:
here is my engine (located in lib/baco/engine.rb):
require 'rails'
module Baco
class Engine < Rails::Engine
end
end
EDIT 2:
This is my css file (located in vendor/assets/stylesheets/application.css.scss):
/*
* 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 baco
*/
input {
padding:10px;
}
Turns out I still need to require the the css from the app that is loading the gem..
Is this a normal situation? Because I haven't read about that anywhere..
Anyways, got it to work, thanks for looking into it, hope this topic can helps some others out..