Topic: Trying to change primary color by compilling
I'm trying to change the primary colour used in my MDB 5 project.
To do this, I followed the instructions to download from MDB 5 Pro via npm.
I was able to successfully download my pro version files using: *npm install git+https://oauth2:{my_secret_token}@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential --save* however this is where I am no stuck
My understanding is that in order to change the primary colour I'll need to edit the line : $primary: #1266f1 !default; in the file _variables.scss in mdb-ui-kit/src/scss/free/
This makes sense, but I am trying to now compile this with: npm start but I get the error 'npm ERR! missing script: start'.
The package.json file doesn't contain this start script, but I notice https://github.com/mdbootstrap/mdb-webpack-starter does contain a script called start, but this seems to just include the free version of MDB, so I'm not sure how to use this :)
The npm documentation doesn't go into much detail in how to compile this with npm beyond installing the package: https://mdbootstrap.com/docs/standard/pro/installation/
Thanks for pointing me in the right direction!
Unfortunately, we don't have webpack starter for MDB Pro version. Try remove MDB Free and install MDB Pro using this commands:
npm remove mdb-ui-kitnpm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
I checked JS and SCSS imports in webpack starter, and it should work without any changes in the imports.
williamw priority commented 3 years ago
Thank you Grzegorz!Thanks to this help, I've now successfully completed this.For folks coming to this in the future, here are some more resources that helped with the combination of Grzegorz's comments:Webpack starter: https://github.com/mdbootstrap/mdb-webpack-starter - Using github's Code -> Download Zip, button allows one to copy the webpack starter to your downloads file. You then unzip it and CD your terminal into the same directory. The commands listed in the above link are important such as 'npm run buildMDB' which tells NPM to compile the code from the 'src' to the 'dist' folders.
In Bootstrap's official documentation there are some really helpful links and tutorials on using NPM, which helped me understand the flow of how compiling with NPM works. https://getbootstrap.com/docs/5.0/getting-started/build-tools/
Thanks again Grzegorz.
If you add MDB via npm, you have to configure the entire project yourself. By creating a project from scratch in package.json you will not have the start command added.
You have two options:
- Add a webpack tool yourself and configure it.
- Download our webpack starter and modify it to work with the pro version.
If you decide to modify webpack starter, it should be enough to remove the free version, add the pro version and add the appropriate imports for js and scss files in the src folder.
williamw priority commented 3 years ago
Thank You Grzegorz, this really helped me out in understanding the overall process.
I've now successfully managed to build via npm and change the colour in the free version, but am still struggling with interpreting: 'remove the free version, add the pro version'. I think I'm getting confused with what components of the folder structure from my pro version that I should be copying over.
Are there any example pro versions of your webpack starter that have the neccessary folder hierachy I can study?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.0.0
- Device: Custom Build
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes