Topic: React on Rails
Hello, I have a rails proyect with react, created with webpacker, I added mdbreact and in a hello.js file, but css don't work.
My /components/hello.js
import React, { Component, Fragment } from "react";
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import { MDBBtn } from "mdbreact";
export default class Hello extends Component{
render(){
return(
<div>
<MDBBtn color="primary">Primary</MDBBtn>
<MDBBtn>Default</MDBBtn>
<MDBBtn color="secondary">Secondary</MDBBtn>
<MDBBtn color="success">Success</MDBBtn>
<MDBBtn color="info">Info</MDBBtn>
<MDBBtn color="warning">Warning</MDBBtn>
<MDBBtn color="danger">Danger</MDBBtn>
</div>
)
}
}
My /packs/components
import Hello from 'components/hello'
import WebpackerReact from 'webpacker-react'
WebpackerReact.setup({Hello})
My /layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Examplemdbreact</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'components' %>
</head>
<body>
<%= yield %>
</body>
</html>
My /home/index.html.erb
<%= react_component 'Hello'%>
But de css dont work, I need help.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.11.0
- Device: Pc
- Browser: Chrome
- OS: Linux
- Provided sample code: No
- Provided link: No
Tags
Related topics
Jakub Strebeyko staff commented 6 years ago
Hi there,
Thanks for reaching out! Does the usage of webpacker mean you are not using the Asset Pipeline? In our regular jQ based rails tutorial we suggested this approach to assets bundling. In case it is not an option, perhaps the bundler community could be of more help regarding ways of attaching the CSS assets.
Best Regards, Kuba