Topic: Create new theme - Many components not working
dschaefers62 pro premium priority asked 2 years ago
Expected behavior
Hello,
1) I installed webpack for advanced pro standard with the 'mdb5 webpack starter', then I successfully executed npm run start
and changed style.css to create a custom theme to change primary & secondary colors.
When I ran /dist/index.html, some components worked, some did not. I expected that all of the components (buttons, alerts, badges, btn-outline, text colors, etc.) would pick up the new custom theme.
2) Then after running npm run build
I expected to see new bundle files in the /dist folder (for example: mdb.min.css & mdb.min.css.map).
Actual behavior
Components working / not working:
- Btn: btn-primary, btn-secondary, btn-tertiary all worked.
- btn-success, -danger, -warning, -info did not work (they had white
background) - Btn-outline: no border is showing
- Alerts: no background showed for any of them: -primary, secondary, etc.
- Badge: only 'badge-warning' worked; all others were not visible
- Text color: does not work (text-success, etc.)
- Text selection color (Input type=text; select): expected it to change to the new primary color, but it stayed the same default blue color
1) Am I missing some configuration to cause the components to not work? The /dist folder after running npm run start
has only an updated main.js file.
2) What new bundle files should be in the /dist folder after the npm run build
? I would like to copy new 'mdb.min.css' & 'mdb.min.css.map' files with the custom theme to my on-going project folder.
Thanks in advance!
Resources (screenshots, code snippets etc.)
Styles.scss:
// @import '~mdb-ui-kit/css/mdb.min.css';
@import '~mdb-ui-kit/src/mdb/scss/mdb.pro.scss';
$my-theme-primary: #383894; // theme primary color, change this value to customize theme
$my-theme-secondary: #f1e6da; // theme secondary color, change this value to customize theme
$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors
// include theme styles
@include mdb-theme($my-theme);
mlazaru staff answered 2 years ago
Hi!
1.This project starter has configured purgeCSS, which job is to scan your index.html
and to remove all unused classes from the final build. It means if you run npm build
and after that you'll add alert with class 'bg-danger' to the index.html
and run it with live server, it simply could not have required CSS.
You should run npm run build
after your html file is ready.
We recommend to use npm run dev
for development.
You can disable purgeCSS by removing or editing purgecss config in postcss.config.js
file.
2.npm run build
should create 3 files in dist/ folder: index.html
, main.js
, main.js.LICENSE.txt
. In this starter setup webpack bundles both js and styles into single javascript file.
dschaefers62 pro premium priority commented 2 years ago
Thanks guys. Awesome support for a great product!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.1.0
- Device: Desktop
- Browser: Any
- OS: Win 11
- Provided sample code: No
- Provided link: No