I'm currently trying to install Tailwind into a rails 6 application via Webpack but after following the docs the styles are not being applied to a view template as shown in the image. I have Tailwind v1.0.3. I also tried to upgrade Webpack to v4 so not sure if it's something due to that.
I have the following files:
javascript/css/application.css
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
My packs/application.js looks as follow:
require("stylesheets/application.scss")
And my /postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
I can also see from the packaje.json file that Tailwind was in fact installed.
{
"name": "artsy_space",
"private": true,
"dependencies": {
"#rails/webpacker": "3.5",
"tailwindcss": "^1.0.3",
"vue": "^2.5.17",
"vue-loader": "14.2.2",
"vue-template-compiler": "^2.5.17"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
}
}
and the application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>ArtsySpace</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<p class="alert alert-error">
<%= flash[:alert] %>
</p>
<p class="alert alert-info">
<%= flash[:notice] %>
</p>
<%= yield %>
</body>
</html>
H
ere is a link to a PR in the repo.
Any idea what might it be?
It appears you might be requiring the wrong directory. Try changing:
require("stylesheets/application.scss")
to:
require("css/application.css")
Also, note that you're requiring a .scss file but it looks like the actual file is .css?
Try adding this line to your javascript/packs/application.js file
require("stylesheets/application.scss")
Everything else looks correct.
I'm also assuming you ran yarn add tailwindcss in your console.
If adding that file doesn't work, try running bin/webpack in your console.
If there are any error messages, they will help you debug the issue.
The only thing that worked for me is importing manually tailwind file into the application.js file.
require("./../../assets/stylesheets/application.tailwind.css")
and then running rails assets:clobber
Related
There are two pieces of my application that seem to require that I load my javascript at different points.
Omniauth works when I place <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' within <head></head>.
Shubox (js library used to upload photos) works when I place <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' just before </body>.
Each of the two does not work when the javascript is loaded where the other requires. So, if I place the javascript line at the end of the body, omniauth does not work.
I can provide additional information if needed. Thank you in advance.
application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
application.html.erb
<html>
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body data-shubox="<%= Rails.application.credentials.dig(:aws, :secret_access_key) %>">
<% if flash.any? %>
<% flash.each do |key, value| -%>
<section class="flash flash__<%= key %>"><%= value.html_safe %></section>
<% end -%>
<% end %>
<%= yield %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</body>
</html>
Because of Turbolinks your application.js needs to be in the head tag, otherwise it is evaluated twice . This can cause a problem with libraries that expect your DOM to be loaded when you initialize them - which I think is your problem with shubox.
So you should put something like this in your application.js (if you are using Turbolinks 5, for earlier version the event is called page:load)
$(document).on('turbolinks:load',() => {
new Shubox('#avatar', { key: "abcde-qwerty-12345" })
}
);
You can always create 2 packs if you need them in different places:
javascript/packs/the_one_with_turbolink.js
javascript/packs/the_one_with_shubox.js
then you can do
javascript_pack_tag :the_one_with_turbolinks
and
javascript_pack_tag :the_one_with_shubox
I've got a Rails app that repeats packages if I go back to the page that's supposed to render them.
For instance, my OwlCarousel with two images will multiply and have the carousel navigation superimposed on top of the previous one.
Brief GIF to explain
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>CRISPR Citrus</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
#app/javascript/packs/application.js
import Rails from "#rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "#rails/activestorage"
import "channels"
require("jquery");
import '#popperjs/core'
//Owl Carousel
import "../js/owlcarousel"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
#app/javascript/js/owlcarousel.js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
import "owl.carousel/dist/assets/owl.theme.default.min.css"
$( document ).on('turbolinks:load', function() {
$(function () {
$('.owl-carousel').owlCarousel(
{
items: 1,
loop: true,
autoplay: true
}
);
});
})
#owl carousel is simply called like this:
<div class="owl-carousel owl-theme owl-theme-dark">
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
<%= image_tag "tmp/test_genotyping.png", alt:"", width:""%>
</div>
I think maybe OwlCarousel has a way to destroy itself before reloading, which I could add in owlcarousel.js but I think that would be a way to "patch" an ongoing issue. Is this supposed to happen?
Issue persits
If anyone reads the post in the future, this was the solution I found.
Simply add:
#in app/views/layouts/application.html.erb
<head>
...
<meta name="turbolinks-cache-control" content="no-cache">
...
</head>
I couldn't make it work for specific view, so I simply did it for every view in the app. If anyone knows how to implement it directly within a view, I'm interested.
I am trying to add simple controller to view that uses preact component in ruby rails. It just shows hello world just a basic program just trying to use a preact component in rails.
There is not much available for such thing to try I have been searching for quite a time now but no luck. I am following this https://github.com/UseHover/preact-rails to perform this.
application.html.erb
<title>Helloworld</title>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
<%= javascript_pack_tag 'application' %>
</body>
The view where I call the component.
<%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>
Package.json
{
"name": "helloworld",
"private": true,
"dependencies": {
"#rails/webpacker": "^4.0.7",
"preact": "^8.5.2",
"preact_ujs": "^0.1.1"
},
"devDependencies": {
"webpack-dev-server": "^3.8.1"
}
}
error:-
Webpacker can't find application in D:/Projects/Ruby
Project/helloworld/public/packs/manifest.json. Possible causes:
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.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Extracted source (around line #10):
<body>
<%= yield %>
<%= javascript_pack_tag 'application' %>
</body>
</html>
Try using Preact 10 instead of 8. preact-rails seems to be using 10 in their docs.
It can be easily done using CDN.
<h1>Render by Preact client library using h and render function</h1>
<div id="preact">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.5.2/preact.dev.js">
</script>
<script>
var Component = window.preact.Component,
h = window.preact.h,
render = window.preact.render;
var PreactApp = function (props){
return h('h1',
{className: ''},
'Hello world!');
}
render(PreactApp(),document.getElementById("preact"));
</script>
I'm not an expert when it comes to rails, my app was working fine but suddenly when i reload any page, at the first milliseconds it shows no compiled css and then everything is fine .
I don't how to explain it really well but it bugs me every-time i reload the page .
Anyone have encountered this problem or have a fix to it ?
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'shared/flash_messages' %>
<%= render 'shared/navbar' %>
<main class="container-fluid">
<%= content_for?(:content) ? yield(:content) : yield %>
</main>
</body>
</html>
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("stylesheets/application")
import "bootstrap"
app/javascript/stylesheets/application.scss
$theme-colors: (
"primary": #4299E1,
// Gray colors
"gray-100": #F7FAFC,
"gray-200": #EDF2F7,
"gray-300": #E2E8F0,
"gray-400": #CBD5E0,
"gray-500": #A0AEC0,
"gray-600": #718096,
"gray-700": #4A5568,
"gray-800": #2D3748,
"gray-900": #1A202C,
// Blue Colors
"blue-100": #EBF8FF,
"blue-200": #BEE3F8,
"blue-300": #90CDF4,
"blue-400": #63B3ED,
"blue-500": #4299E1,
"blue-600": #3182CE,
"blue-700": #2B6CB0,
"blue-800": #2C5282,
"blue-900": #2A4365,
// Red colors
"red-100": #FDEEEE,
"red-200": #FAD4D5,
"red-300": #F7B9BB,
"red-400": #F28589,
"red-500": #EC5156,
"red-600": #D4494D,
"red-700": #8E3134,
"red-800": #6A2427,
"red-900": #47181A,
// Green colors
"green-100": #EFF9F4,
"green-200": #D7F1E4,
"green-300": #BEE9D4,
"green-400": #8ED8B3,
"green-500": #5DC793,
"green-600": #54B384,
"green-700": #387758,
"green-800": #2A5A42,
"green-900": #1C3C2C,
);
#import '~bootstrap/scss/bootstrap';
The problem was with webpacker i was using bootstrap with webpacker, instead i have switch to the bootstrap-rubygem and it's working well .
I am trying to load a simple vue module in my layout application file
but the app is failing to load the module. I am using the webpacker gem with rails 5.1.1. and ruby version 2.3.3
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Potato</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
</head>
<body>
<%= yield %>
</body>
</html>
The hello_vue.js file (see code below) is located in the javascript/packs directory and it's importing a very basic hello.vue file also located the same directory:
import Vue from 'vue'
import App from './app.vue'
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('hello'))
const app = new Vue(App).$mount('hello')
console.log(app)
})
I've tried to restart the rails server and the webpack-dev-server but nothing...
the app seems just to ignore the file.
I've generated a controller Pages with an index action and now it's working...