Topic: Style sheet not working

jcbenecaid free asked 5 years ago


Just install the MDB and follow the instruction to import style sheet in root/index.js.

However, the component does not have any style yet.

Expected behavior enter image description here

Actual behavior enter image description here

Resources (screenshots, code snippets etc.)


jcbenecaid free commented 5 years ago

In addition, we are also using cross-env. So instead of root/index.js, we have root/index_1.js, root/index_2.js, root/index_3.js, etc.

Used the same way adding following:

import "@fortawesome/fontawesome-free/css/all.min.css"; import "bootstrap-css-only/css/bootstrap.min.css"; import 'mdbreact/dist/css/mdb.css';

But styles are not working


Konrad Stępień staff answered 5 years ago


Hi @jcbenecaid,

In the console do you have some errors?

If you have a project on GitHub, I can check it to find the problem.

Please try again follow the quick start tutorial.

Also when you finish the tutorial, please delete node modules folder and package-lock.json file.

I waiting for your response.

Best regards, Konrad.


jcbenecaid free commented 5 years ago

The issue is bootstrap style can not import properly, Adding "@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");" into my baseStyle actually works, but I do not feel it is a good practise


jcbenecaid free commented 5 years ago

From my investigation,

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css") works

@import "~/node_modules/bootstrap-css-only/css/bootstrap.min.css") does not work

But these two files are exactly the same


Konrad Stępień staff commented 5 years ago

Hi @jcbenecaid,

Can you test it with new create-react-app and check if everything works correctly?

When testing my packages locally, I haven't experienced a similar problem yet.

Best regards, Konrad.


jcbenecaid free commented 5 years ago

it works with new project by creat-react-app

Figured out the problem is our .css loader not working with bootstrap.css

Thank you so much for your help


Konrad Stępień staff commented 5 years ago

Thank you very much for your feedback!   If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.   Best Regards, Konrad



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.21.1
  • Device: Web
  • Browser: Chrome, Firefox
  • OS: macOS Mojave 10.14.6
  • Provided sample code: No
  • Provided link: No