Create new theme - Many components not working


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!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • 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