Topic: Trying to change primary color
Trying to change colors in the mdb.min.css but any changes I make don't seem to change anything, even after compiling
What is the goal? Do you want to change the default primary color that we use in various places (buttons, color of pills, tabs, etc.)? If so, you should use some bundler, import the scss files, and modify the $primary scss variable.
Describe exactly what you want to achieve and how you are trying to do it. This will make it easier for us to help you with your problem.
BradleyByerly04 priority commented 1 year ago
Exactly that, I've imported the file using npm and then when I edit mdb.min.css I use an SCSS compiler on it, similar to how it's done with BS5 but it never changes the primary and secondary colors.
Grzegorz Bujański staff commented 1 year ago
Try to do the same, but using scss files. In the scss/free/_variable.scss file, find the $primary variable, overwrite it, and recompile the files.
BradleyByerly04 priority commented 1 year ago
I'm not seeing any scss files, where exactly would I find these and/or import them?
Grzegorz Bujański staff commented 1 year ago
@import '~mdb-ui-kit/src/scss/mdb.pro.scss'; or @import '~mdb-ui-kit/src/mdb/scss/mdb.pro.scss'; if you use advanced pack.
BradleyByerly04 priority commented 1 year ago
And that goes in? Not familiar with using @
MDBootstrap staff commented 1 year ago
It's a way of linking stylesheets alternative to linking multiple files in the HTML.
BradleyByerly04 priority commented 1 year ago
It goes in CSS then?
Mateusz Lazaru staff commented 1 year ago
Not exactly. Normal CSS will not be able to read this file. You must have SCSS file and import it inside this file. To make your file able to read SCSS, you'll need an additional library, like sass to compile it to normal CSS at the endpoint.
Are you using any bundler like webpack, vite, parcel or other in your project?
BradleyByerly04 priority commented 1 year ago
No, I'm not. Should I be for this process?
Mateusz Lazaru staff commented 1 year ago
Yes. We have a tutorial how to create a project with a bundler, which already has sass included. For example: https://mdbootstrap.com/docs/standard/getting-started/vite-integration/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.0.0
- Device: PC
- Browser: Opera GX 104.0.4944.80
- OS: Windows 11
- Provided sample code: No
- Provided link: No