Currently I'm trying to use Roboto in my application to have a font similar to five thirty eight. However, when I try to edit the configuration for Tailwind and restart the server I don't see the font.
Here is the the link I'm using to load the font that I got from google fonts:
<head>
<title>ArtsyDecor</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
I then added the Roboto font to the tailwind.config.js on my rails app.
module.exports = {
theme: {
fontFamily: {
sans: '"Roboto"'
display: ['"Roboto"', '"sans-serif"'],
body: ['"Roboto"', '"sans-serif"'],
},
extend: {}
},
variants: {},
plugins: []
}
But when I restart the server I don't see Roboto being the main font. It seems the tailwind configuration is being overwritten somewhere.
What seems to be wrong?
try installing Roboto into your project with NPM instead of the CDN:
yarn add typeface-roboto
I think there is a typo. the font is defined in single and double quotes. use only single or double quotes.
Related
Here is the error code:
ActionView::Template::Error (Webpacker can't find stylesheets in /app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains: {
"application.css": "/packs/css/application-77c6d56c.css",
"application.js": "/packs/js/application-202b434086ff6248f760.js",
"application.js.map": "/packs/js/application-202b434086ff6248f760.js.map",
"entrypoints": {
"application": {
"css": [ "/packs/css/application-77c6d56c.css" ],
"js": [ "/packs/js/application-202b434086ff6248f760.js" ],
"js.map": [ "/packs/js/application-202b434086ff6248f760.js.map" ]
And the offending code is:
7: <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" %>
8: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9: <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10: <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
11: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12: <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css">
I realize that I have unnecessary link_tag(s), but I put them there just to make sure everything went through correctly. All of this works flawlessly in development but, once deployed to Heroku, it just crashes here so nothing is working right now.
I tried adding some #import(s) to connect all the css/js files to no avail. I'm not sure what the issue is at this point.
Using Rails 6, Webpacker, TailwindCSS, no real JS in usage so deleting all the script stuff wouldn't be a real issue, I just left it because this is a project still in development and will include JS at some point.
I had this same problem and noticed several templates/tutorials for adding Tailwind CSS to Rails specify adding to application.html.erb:
<%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
while others specify:
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Not a webpack expert, but doing some reading convinced me that the name in the stylesheet_pack_tag helper is what webpack will look to bundle (from your \app\javascript\packs folder) but then is also the stylesheet name bundled by webpack (from your \public\packs\css folder) that your layout is looking for. It's really confusing, but I guess this is the convention over configuration thing. It also jives with the error being thrown above. If you rename your tag so it's application it should solve your error (at least it seemed to work for me). Maybe the stylesheets name is relevant for an older rails version?
So i already imported the application.scss with the tags
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
and it works
however i want to separate my css files and call them in specific views like in the home/index view call
<%= javascript_pack_tag 'home/index', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home/index', media: 'all', 'data-turbolinks-track': 'reload' %>
ive achieved this creating a separate js file such as home.js and inside just importing my home.scss like this
import '../../stylesheets/home/index'
my question is, is this the correct way?
do i always have to create a js file to import my css file?
is there a better aproach?
Yes, it's possible. You don't need to create a separate JS file, just create a CSS "pack" for each view:
app/javascript
└── packs
├── application.js
└── home.scss
In your view:
<%= javascript_pack_tag 'home', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'home', media: 'all', 'data-turbolinks-track': 'reload' %>
Demo app, branch with change: https://github.com/rossta/rails6-webpacker-demo/compare/example/css-pack
Caveats:
Using multiple "packs" per page (e.g. 'application' and 'home') is not typically recommended (a) in Webpacker 5. Webpack has no way of knowing that you want to share code between packs unless you add special configuration to do so (see footnote). My answer above assumes you're not duplicating imports across bundles (or you're ok with duplication).
Webpack will still create a JavaScript bundle to load your CSS bundle so you'll still need both javascript_pack_tag and stylesheet_pack_tag
a. You can share code across bundles by using the splitChunks API (Webpacker 5 docs, enabled by default in Webpacker 6).
I'm trying configure the devise gem on my application built in Rails 5.2.
After install devise and create the views I'm get this error
The asset "devise/sessions.css" is not present in the asset pipeline.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag params[:controller], media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag params[:controller], 'data-turbolinks-track': 'reload' %>
That was raised on line #9.
I've already created this file on my app/assets folder and setted on my assets.rb file like this:
Rails.application.config.assets.precompile += %w( addresses.css
welcome.css
donations.css
givers.css
sessions.css
scaffolds.css)
and this:
Rails.application.config.assets.precompile += %w( addresses.css
welcome.css
donations.css
givers.css
devise/sessions.css
scaffolds.css)
But I continue receiving the same error.
I have no more ideias what to do to solve my problem, someone could help me, please?
I'm using rails 5 to create a Facebook clone as a project and I periodically get an 'Errno::ENOENT in Devise::Sessions#new' error sometimes when I start the local server. I haven't yet experienced the problem on my production server. The problem goes away once I refresh the page.
The extracted source code is below. The line that starts stylesheet_link_tag is highlighted.
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
No such file or directory # rb_file_s_rename - path/facebook/tmp/cache/assets/sprockets/v3.0/Ej/EjoE1YdPTMb8n3_nucZiHWaR9FpoOSZttfl56_miOS0.cache.47161664401480.4109.232718, path/facebook/tmp/cache/assets/sprockets/v3.0/Ej/EjoE1YdPTMb8n3_nucZiHWaR9FpoOSZttfl56_miOS0.cache)
I have added the bootstrap-sass gem and have installed the bundle. I have gone to github and think I have followed the directions correctly to finish the install for ruby on rails. It doesn't appear to be making a difference however on my local site - no font/formatting changes have been made, even after the install.
I am using a PC, https://github.com/findingtheway/pin
Change your app/views/layouts/application.html.erb to this:
<head>
<title>Pin</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Rails uses application by default you have default which is why bootstrap is not loading.