webpacker

I am working Rails5 project with Webpacker in order to run React properly But when import my css file inside my root component seems it is not working at all. Looking like stylesheet is not coming at all. This is my root Component import React from 'react' import ReactDOM from 'react-dom' import StartForm from './insurance_form/start_form' //import PropTypes from 'prop-types' import 'react-datepicker/dist/react-datepicker.css'; // not working ReactDOM.render( <StartForm />, document.getElementById('start-form-index-container') ) This my webpack/environment.js const { environment } = require('

I am receiving this error when I try to load a page in my new rails 5.1 app using webpacker. I would like webpacker to handle CSS as well. Started GET "/" for ::1 at 2017-09-01 12:20:23 -0400 Processing by HomeController#welcome as HTML Rendering home/welcome.html.erb within layouts/application Rendered home/welcome.html.erb within layouts/application (0.4ms) Completed 500 Internal Server Error in 28ms ActionView::Template::Error (Webpacker can't find application.css in /Users/myusername/Documents/testing-ground/myapp/public/packs/manifest.json. Possible causes: 1. You want to set wepbacker

I'm using webpacker with rails 5.1.4 to play with Reactjs, Redux, and react-router-dom. I have a navbar component that needs to display images, but I'm not able to access images in assets/images folder and neither in public folder. I'm here : app/javascript/src/components/navbar My routes defined in main.jsx : <BrowserRouter> <div> <Alert error={error} /> <Navbar user={user}/> <Switch> <Route path="/post/:id" component={PostsShow} /> <Route path="/" component={PostsIndex} /> </Switch> </div> </BrowserRouter> Here is what I've tried : <img src="logo.png" alt="Logo" /> <img src="assets/logo.png"

I'm trying to fiddle with Rails 5.1's new webpacker gem, along with VueJS, but can't get my erb views to pass data to VueJS components... Let's say I have a user show view # view/users/show.html.erb <%= javascript_pack_tag "user-card" %> <%= content_tag :div, id: "user-card", data: { username: @user.name } do %> <% end %> And my javascript: // app/javascript/packs/user-card.js require("user-card") // app/javascript/user-card/index.js import Vue from 'vue/dist/vue.esm' import UserCard from './components/UserCard' document.addEventListener('DOMContentLoaded', () => { let element = document

I'm using Rails 5.2.0 and Webpacker gem to deploy a Vue application. The show.html.erb file is very simple: <div data-behavior="vue-app"><MyComponent></MyComponent></div> And then in my entry pack, packs/my_vue_app.js: import TurbolinksAdapter from 'vue-turbolinks'; import Vue from 'vue/dist/vue.esm' Vue.use(TurbolinksAdapter); import MyComponent from '../components/my_app/index.vue' document.addEventListener('turbolinks:load', () => { var element = $('[data-behavior="vue-app"]'); if(!element) { return }; console.log('Initializing Vue'); const app = new Vue({ el: element[0], data: { },

I think this should be simple, but I am facing some trouble on how to import and use an image in Vue single file component. Can someone help me how to do this? Here is my code snippet: <template lang="html"> <img src="zapierLogo" /> </template> <script> import zapierLogo from 'images/zapier_logo.svg' export default { } </script> <style lang="css"> </style> I have tried using :src , src="{{ zapierLogo }}" , etc but nothings seems to work. was not able to find any example too. Any help? As simple as : <template> <div id="app"> <img src="./assets/logo.png"> </div> </template> <script> export