Hello,

I would like, with mdb-webpack-starter, to create a new custom theme (as shown here: https://mdbootstrap.com/docs/standard/content-styles/theme/).

Here is what I did and the result I get :

I started by cloning mdb-webpack-starter like this:

gh repo clone mdbootstrap/mdb-webpack-starter (GitHub CLI)

Then in "./mdb-webpack-starter" I did :

npm install

Then I installed the pro advanced version of mdb "mdb-ui-kit-pro-advanced" like this:

npm i git+https://oauth2:MY_ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

Finally, in "./src/scss/index.scss" I copied the code from the documentation like this:

@import '~mdb-ui-kit/src/mdb/scss/mdb.pro.scss'; // I adapted documentation to my case.

[...]

// include theme styles
@include mdb-theme($my-theme);

I run the dev server with:

npm start

And I get the following errors:

ERROR in ./src/scss/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
7 │       color-level($primary, $alert-bg-level),
│                             ^^^^^^^^^^^^^^^
╵
node_modules\mdb-ui-kit\src\mdb\scss\pro\theme\components\_alert-theme.scss 7:29  mdb-alert-theme()
node_modules\mdb-ui-kit\src\mdb\scss\pro\theme\_mixins.scss 41:3                  mdb-theme()
D:\Workspaces\Test\mdb-webpack-starter-pro\src\scss\index.scss 9:1
                    root stylesheet
    at D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\webpack\lib\NormalModule.js:316:20
    at D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass-loader\dist\index.js:73:7
    at Function.call$2 (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:90633:16)
    at _render_closure1.call$2 (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:79699:12)
    at _RootZone.runBinary$3$3 (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:27088:18)
    at _FutureListener.handleError$1 (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:25616:19)
    at _Future__propagateToListeners_handleError.call$0 (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:25913:49)
    at Object._Future__propagateToListeners (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:4539:77)
    at _Future._completeError$2 (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:25746:9)
    at _AsyncAwaitCompleter.completeError$2 (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:25089:12)
    at Object._asyncRethrow (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:4288:17)
    at D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:13180:20
    at _wrapJsFunctionForAsync_closure.$protected (D:\Workspaces\Test\mdb-webpack-starter-pro\node_modules\sass\sass.dart.js:4313:15)
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js!src/scss/index.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss 617 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

    ERROR in ./src/scss/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./src/scss/index.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Undefined variable.
    ╷
    7 │       color-level($primary, $alert-bg-level),
    │                             ^^^^^^^^^^^^^^^
    ╵
    node_modules\mdb-ui-kit\src\mdb\scss\pro\theme\components\_alert-theme.scss 7:29  mdb-alert-theme()
    node_modules\mdb-ui-kit\src\mdb\scss\pro\theme\_mixins.scss 41:3                  mdb-theme()
    D:\Workspaces\Test\mdb-webpack-starter-pro\src\scss\index.scss 9:1
                        root stylesheet
i ｢wdm｣: Failed to compile.

Do you have an idea?

Thanks