I created a folder named "custom" under app->javascript->packs and place the following external js:
metisMenu.min.js
startmin.js
Then on under app->javascript->packs->application.js I required the stated js plugin above:
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("custom/metisMenu.min").start()
require("custom/startmin").start()
require("channels")
import 'bootstrap'
import './stylesheets/application.scss'
Unfortunately, still this did not work. Any idea what am I doing wrong?
Also is it ok to place all of the custom css under app->javascript->packs->stylesheets (folder) and not on the assets->stylesheets anymore since Rails 6 is using webpacker?
Your folder needs to be structured like that:
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("custom")
app/javascript/custom/index.js
require("myScript")
require("mySecondScript")
The myScript.js and mySecondScript.js files, for instance, will be located in the same folder ie app/javascript/custom.
You can add custom js files like this:
Add your js files to app/javascript folder
app/javascript/custom/metisMenu.min.js
app/javascript/custom/startmin.js
Require js files in app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
# custom js files
require("custom/metisMenu.min")
require("custom/startmin")
Add <%= javascript_pack_tag 'application' %> to application.html.erb
UPDATE
You can add style files like this:
Add your style files to app/javascript folder
app/javascript/stylesheets/metisMenu.min.scss
Import style files in app/javascript/packs/application.js
import "stylesheets/metisMenu.min"
Add <%= stylesheet_pack_tag 'application' %> to application.html.erb
Set extract_css: true in config/webpacker.yml
Related
I created a style.css file in app/assets/stylesheets for my Ruby on Rails project. I added some styling and started up the server. I didn't put any <link href...> or stylesheet_link_tag anywhere in any html.erb file but every page had the css changes I wrote in style.css
Additionally, I now have to restart the server every time I make a change to the CSS in order to see those changes in the browser. Has anyone ran into this before? By the way, I am using action cable. I also don't have a public/assets folder.
application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
$(document).on('turbolinks:load', function () {
alert("Hello!");
})
application.css
/*
* 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, or any plugin's
* vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
style.css
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid black;
}
#left, #right {float:left}
#left {width: 30%;}
#right {width: 70%;}
Although running bootstrap with rails is working fine, the JS functionality isn't working for me. For example, I can't collapse navbar, but I can run $() in my browser console.
My /app/javascript/packs/application.js looks like this:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap-sprockets')
require('popper.js')
require('turbolinks')
// As instructed in https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails
//= require bootstrap-sprockets
// But the above is not working
My /app/assets/stylesheets/application.scss looks like this:
#import "bootstrap" ;
body {
margin: 0 ;
}
In my routes.rb, I have root to: 'pages#home'. The home.html.erb looks like this:
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<main role="main" class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for Bootstrap, by #mdo.</p>
</div>
</footer>
</div>
When I run the server, and visit the home page, an error is showing up on the browser's console:
Error: Cannot find module 'bootstrap-sprockets'
My gem file has these entries for jquery, bootstap:
gem 'jquery-rails', '~> 4.3', '>= 4.3.5'
gem "bootstrap", "~> 4.4"
gem 'bootstrap-sass'
I can't use features like navbar collapse in bootstrap. What's wrong?
I had same problems with collapse not working, and latest version of jQuery and bootstrap.
Had to change to:
"bootstrap": "^4.4.1",
"jquery": "3.4.1"
But this was with rails 6.0.1, so using ujs. Check those versions.
I have a rails 5 app with webpacker. I am trying to use webpack to both bundle my css files and my js files.
In my javascripts/packs, I have both an application.js and application.scss files. I added bootstrap as dependencies to my package.json and am now trying to import both bootstrap css and js into my rails app. in application.js I have :
console.log('Hello World from Webpacker')
import 'jquery'
import 'bootstrap/dist/js/bootstrap';
In application.scss I have :
#import '~bootstrap/dist/css/bootstrap';
I cant figure out how to import both scss and js at the same time. In application.html.erb I have both
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application' %>
However it's ever the js or the css that is loaded but never both !
I guess there's a problem in the way webpack is configured but I cant figure it out. How do I configure webpack correctly to work with my rails 5 app and bundle both my css and js correctly.
Here's a link to the project :
https://github.com/davidgeismar/Visitors
For loading webpacker stylesheet to your Rails application first you should remove app/javascript/packs/application.scss file. Because webpacker separate the stylesheet code with same js file name with stylesheet extensions.
Example - Your webpacker main js file is - app/javascript/packs/application.js and you should import all css and js files inside. So you don't need keep app/javascript/packs/application.scss file, but webpacker generate an application.css file from extracting the code from application.js.
Here's the modified code from your rails app github repo. First remove the app/javascript/packs/application.scss
#app/javascript/packs/application.js
console.log('Hello World from Webpacker')
import 'jquery'
import 'bootstrap/dist/js/bootstrap';
//import 'bootstrap/dist/css/bootstrap.css';
// Added js code for checking webpacker is working fine or not.
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#content-from-webpacker').innerHTML = '<p class="h1">h1. Bootstrap heading</p><h1 class="display-1">Display 1</h1>'
})
Here's view code for loading webpacker.
#app/views/layout/application.html.erb
<body>
<%= render 'shared/navbar' %>
<%= yield %>
<!-- This id(content-from-webpacker) is used for displaying content from webpacker -->
<div id="content-from-webpacker"></div>
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
<%= javascript_include_tag 'application' %>
</body>
I hope it should work. Also I made this changes to your github repo and send a pull request.
I want to include SASS support in a brand new Rails App directly importing the .scss file on my Javascript files.
So far this is what I have done:
1- Follow https://github.com/rails/webpacker to create a new webpacker rails app with react integrations. Hello world was succesfull.
I have a entry point for Webpacker in packs folder
import ReactDOM from "react-dom";
import Hello from "../hello_world";
document.addEventListener("DOMContentLoaded", () => {
ReactDOM.render(
<Hello name="React" />,
document.body.appendChild(document.createElement("div"))
);
});
3 - My Hello world component
import React from "react";
import "./test.scss";
const Hello = props => <div className="red">Hello {props.name}!</div>;
export default Hello;
4 - My sass file
.red {
background-color: red;
}
5 - view
<%= javascript_pack_tag 'hello_world_pack' %>
6 - layout template
<html>
<head>
<title>Myapp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
</head>
<body>
<%= yield %>
</body>
</html>
No complaints at all but Red color is not applied. What I overlook?
NOTE: Successfully I could add SASS support but adding a my_stylehseet.scss file directly in pack folder and referencing it into my layout template with `<% = stylesheet_pack_tag 'my_stylesheet %>'. But I want that my template is stylesheet agnostic s I don't have to have severals of them.
I really think there is an more elegant way If I understood properly webpacker doc https://github.com/rails/webpacker/blob/master/docs/css.md
Maybe Am I wrong?
Just for the records the question is already answered here Rails Webpacker 3.0 import CSS file is not working and the webpacker documentation is clear about it https://github.com/rails/webpacker/blob/master/docs/css.md
I thought I followed the directions, but maybe I missed something?
Gemfile:
gem 'foundation-rails'
ran bundle
ran rails g foundation:install
This added and made changes to:
views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
assets/stylesheets/application.css
/*
* 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
assets/stylesheets/foundation_and_overrides.scss
// -- snip --
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;
#import 'foundation';
assets/javascripts/application.js
// 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 any plugin's vendor/assets/javascripts directory 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/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
I have successfully seen buttons display correctly, but other things just refuse to display as expected. The first thing I looked at was the grid example, so i copied and pasted the source, but it didn't shade as the example. The spacing seems correct...
Then I tried accordian. I copied and pasted from the source code of the examples. It displayed the list bullets but didn't expand/contract.
Then I tried the top bar. I copied and pasted from the source code of the examples. It put a horizontal bar at the top, but the menu items are not inline.
Then I tried making a brand new rails project just to test foundation. I followed the same steps, and got the same results. (mumbles something about insanity...)
I've used foundation before, but apparently I'm missing something important.
$ rvm list
rvm rubies
=* ruby-2.2.1 [ x86_64 ]
# => - current
# =* - current && default
# * - default
$ rails -v
Rails 4.2.4
foundation-rails gem currently loads foundation 5, while the website has examples for foundation 6. It would appear that they are NOT compatible ;)
To test, see the documentation for foundation 5