Rails6にMaterial Design Bootstrapを導入したい

お世話になります。
RailsアプリにBootstrap Material Designの導入を試みております。

まずは以下の記事を参考にし、Bootstrapから導入し、表示までは成功しました。
https://qiita.com/kazutosato/items/d47b7705ee545de4cb1a

その後、Material design Bootstrapを以下の記事を参考に導入したのですが、
発生しているエラーがどうしても解決できず、スタイルが適用されません。
https://mebee.info/2020/08/06/post-15232/

発生したエラー

適用されずにデベロッパーツール上に以下のエラーが発生しました。

bootstrap-material-design.js:6877 Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: theme-color(primary) is not a color.
    ╷
132 │   lighten($bmd-switch-handle-checked-bg, 28%),

試したこと

なので、エラー文をググり以下の記事を参考に
javascript/css/application.scss に @import "~bootstrap/scss/functions"; を追加したのですが、
結局変わらずでした。。
https://dyson.work/2020/08/10/cannot-resolve-theme-color/

コード

CSS
1//app/javascript/css/application.scss
2
3@import "~bootstrap/scss/functions";
4@import '~bootstrap-material-design/scss/bootstrap-material-design';
5

//app/javascript/pacls/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import 'bootstrap-material-design';
import '../css/application';
Rails.start()
Turbolinks.start()
ActiveStorage.start()

Javascript
1// config/webpack/loaders/environment.js
2
3const { environment } = require('@rails/webpacker')
4const webpack = require('webpack')
5environment.plugins.append('Provide', new webpack.ProvidePlugin({
6  $: 'jquery/src/jquery',
7  jQuery: 'jquery/src/jquery',
8  Popper: ['popper.js', 'default']
9}))
10module.exports = environment