Topic: Style sheet not working
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
Actual behavior
Resources (screenshots, code snippets etc.)
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 4 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 4 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 4 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 4 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 4 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
jcbenecaid free commented 4 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