I start to study Rails 3.1. However, css doesn't work.
There are some scss in app/assets/stylesheets/, but they don't appear in application.css
I create productshoge.css(not scss) but it doesn't work either.
I think "that'll automatically include all the stylesheets available in this directory" , but any css doesn't be included.
when I try to re-make new application ( rails new XXX), I met same situation.
would someone advise me?
folders
app/assets/stylesheets/
├── application.css
├── carts.css.scss
├── layout.css.scss
├── line_items.css.scss
├── products.css.scss
├── productshoge.css
├── scaffolds.css.scss
└── store.css.scss
assets.path
irb(main):001:0> y Rails.application.config.assets.paths
---
- /Users/sekai/study/depot/app/assets/images
- /Users/sekai/study/depot/app/assets/javascripts
- /Users/sekai/study/depot/app/assets/stylesheets
- /Users/sekai/study/depot/vendor/assets/stylesheets
- /Library/Ruby/Gems/2.0.0/gems/jquery-rails-3.0.4/vendor/assets/javascripts
application.css
/*
* 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 productshoge.css
*= require_tree .
*/
output(view-source:http://localhost:3000/?debug_assets=1)
<html>
<head>
<title>Pragprog Booksオンラインストア</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" /><!-- <label id="code.slt"/> -->
<script src="/assets/application.js?body=1" type="text/javascript"></script><!-- <label id="code.jlt"/> -->
<meta content="authenticity_token" name="csrf-param" />
<meta content="asIA91Z9Dm0OnAPa4ki6LlWcUst/GypczrubeGSDegM=" name="csrf-token" /><!-- <label id="code.csrf"/> -->
</head>
output css
/*
* 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 productshoge.css
*= require_tree .
*/
environment
development
Just update the rails version in the Gemfile to 3.2.13 and run bundle update. Also you should remove *= require productshoge.css from application.css
I hope this will help you.
Please be sure that you have included that line in /app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
You have to include CSS manually like,
app/assets/stylesheets/
* require carts
* require layout
* require line_items
* require products
* require productshoge
* require scaffolds
* require store
Related
I am using the ruby Gem cssbundling-rails and dart-sass to process Sass in a Rails 7 app (and I am fairly new to Rails).
In the package.json file I define the build:css script:
"build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=. --load-path=./node_modules --load-path=./node_modules/#rpf/sauce --load-path=app/assets/stylesheets/"
This appears to be working; I see the results of several Sass files bundled and processed into one CSS file: app/builds/application.css.
However I cannot see how to add this file to my page. We use Slim so I include the line
= stylesheet_link_tag 'application'
in the app/views/components/_head.html.slim file. That results in this fragment in the final HTML:
<link rel="stylesheet" href="/assets/application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css" />
If I load that file (application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css) into my browser I see it is an empty manifest file which starts
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
and has no files listed below.
What am I missing? How do I load the CSS that was bundled and processed from Sass files into the app/builds/application.css file into my Slim page?
A simple fix is to add
link rel="stylesheet" href="/assets/application.css" type="text/css"
to app/views/components/_head.html.slim instead.
I am having two separate issues (or maybe they are combined and I'm missing it). The app was picking up the bootstrap styles, but is no longer doing so.
Issue 1
When I make any updates to application.js no matter how small (an extra line break anywhere in the file) it would kill the imported bootstrap files.
Now I can't get the bootstrap styles to show period.
Issue 2
When I put the following into the head tag in application.html.erb:
<!-- before -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- after -->
It renders no output to the browser:
<!-- before -->
<!-- after -->
I'm uncertain if this is a Webpacker issue or what is causing this. Please let me know if any other details are required.
I have a full repo here that you can clone / browse with instructions for bringing up the dev environment with Docker.
You can check it out here: Funtime Github repo
Webpacker is not configured to extract any css.
Set extract_css: true in webpacker.yml. Setting this to true will extract any css you import in js files under /packs to separate css files. In your case any css imported in application.js will be available in application.css. If you had a pack called test, the css will be extracted to test.css.
Move out application.scss from packs to /css (or stylesheets, whatever you want)
Update application.js like this:
import "./../css/application";
import Rails from "#rails/ujs";
....
Make sure you start webpacker dev server with bin/webpacker-dev-server.
Here's how it looks like:
With Shakapacker:
app/javascript:
├── packs:
│ # only webpack entry files here
│ └── online_giving.js
│ └── online_giving.scss
└── src:
│ └── my_component.js
└── stylesheets:
│ └── my_styles.css
└── images:
└── logo.svg
And in the app/views/layouts/mylayout.html.haml :
= javascript_pack_tag 'online_giving'
= stylesheet_pack_tag 'online_giving'
you don't need to import the online_giving.scss in the online_giving.js file, Shakapacker will find it.
I am unsure if there is a setting in rails 4.2 that changed from 4.1, or if I am just crazy sauce. But this is my application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap
//= require react
//= require react_ujs
//= require backbone
//= require app
//= require app/helpers/core.js
//= require app/collections/aisis_writer_user
//= require app/routers/aisis_writer_panel
//= require app/views/aisis_writer_panel
It clearly states exactly how my assets should be loaded. The are a couple of these file that have there own require statements at the top. Now in development mode, from how I see things is I do not get a giant concatenated file of assets, instead each asset is loaded as a script tag in the header of the page. That would be fine if it followed the order I have set out.
<script src="/assets/jquery.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app/helpers/intervals.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app/helpers/reset_intervals.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app/routers/aisis_writer_panel.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app/collections/aisis_writer_user.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app/helpers/core.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app/views/aisis_writer_panel.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/app/helpers/polling.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/react.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/react_ujs.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/backbone.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.js?body=1" data-turbolinks-track="true"></script>
This isn't how I specified things to be ordered at all, as a result I am getting:
uncaught ReferenceError: App is not defined
aisis_writer_user.js:1 Uncaught ReferenceError: Backbone is not defined
aisis_writer_panel.js:1 Uncaught ReferenceError: Backbone is not defined
backbone.js:219 Uncaught TypeError: Cannot read property 'each' of undefined
The way I ordered things, these errors should not - or at least not all of them - be appearing.
So my question is: Why is the asset pipeline ignoring me when I tell it to load files in a specific way?
Why is the asset pipeline ignoring me when I tell it to load files in a specific way?
It's not, it's doing exactly what you've asked it to. You are ignoring the big require_tree . in the middle of your require statements.
The whole point of require_tree . is that it recursively includes all the files it finds in the directory you give it. You're giving it ., so that that point you're going to be dumping every single .js or .coffee file in your app/assets/javascripts directory into your manifest, in whatever order they happen to be read from disk.
If you didn't want that behavior, you need to remove that line.
Up until now all of my application's CSS has been served through application.css.scss which looks like this:
/* ...
*= require jquery-ui
*= require_self
*= require_tree .
*/
#import "bootstrap";
I recently needed to create a separate, stripped down manifest file that was to serve only a single embeddable asset in our website. Unfortunately though I couldn't get the CSS file to be packaged up and processed by the asset pipeline. It kept getting put into production with a URL that looked like this:
<link href="/stylesheets/minimag.css" rel="stylesheet" />
rather than what it should have looked like with fingerprinting and precompliation which would be more like:
<link href="/assets/minimag-292d6edcd4fd2398abab273acf8.css" rel="stylesheet" />
On debugging I discovered that the manifest HAS to be called application.css
There's a good chance I'm missing something. BUT on stripping the problem back to its bare essentials I looked just at the application's stylesheet itself.
What I found was that when it was called application.css.scss, it was compiled just fine but when the name was changed it didn't get processed:
So this works:
application.html.haml
...
= stylesheet_link_tag "application"
...
together with a stylesheet called application.css.scss. In production this yields the inclusion HTML:
...
<link href="/assets/application-292d6edcd4fd6ec1da12b93fb273acf8.css" rel="stylesheet" />
...
But this does not work
application.html.haml
...
= stylesheet_link_tag "testing"
...
together with exactly the same stylesheet but now renamed to testing.css.scss. In production this yields the inclusion HTML:
...
<link href="/stylesheets/testing.css" rel="stylesheet" />
...
What makes "application.css.scss" special?
Why is this going on? Why can't I just use a manifest file that has any old name?
(if it's at all relevant I'm deploying to Heroku)
You have to add stylesheets to the precompilation if you want to use them as a standalone file.
# config/environments/production.rb
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
config.assets.precompile += %w(testing.css)
Ruby Version: 2.0.0
Rails Version: 4.0.1
This is a follow-up to my previous question: Why do assets fail to load in production mode?. This was mostly fixed by setting config.serve_static_assets = true in production.rb.
However, now I still have one stylesheet and one javascript file that aren't being pulled in. which (coincidentally) should be pulling in it's own set of dependencies.
In my application.html.erb file I have:
<%= stylesheet_link_tag "application", media: "all" %>
<%= stylesheet_link_tag "frontend", media: "all" %>
However, that seems to be parsing to two very different things. Here is the output:
<link href="/assets/application-1c1eb49916824f465443a709172a580a.css" media="all" rel="stylesheet">
<link href="/stylesheets/frontend.css" media="all" rel="stylesheet">
And in case it makes a difference, here is what frontend.css actually looks like:
/*
* 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree ./frontend
*= require front_end
*/
What am I missing?
In config/application.rb, add frontend.css to config.assets.precompile:
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w( frontend.css )
Don't forget to do this if you create other CSS and JavaScript manifest files.