Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

eliascaceresy free asked 5 years ago


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.


Jakub Strebeyko staff commented 5 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: 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