title: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) when upgrade bootstrap to 5.x
body: <p>I want to upgrade bootstrap-sass 3.x to bootstrap 5(<code>&quot;bootstrap&quot;: &quot;^5.1.3&quot;,</code>) right now. First I add the bootstrap 5:</p>
  <pre><code>npm install bootstrap
  </code></pre>
  <p>the second step I changed the legacy import from:</p>
  <pre><code>@import &quot;../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables&quot;;
  </code></pre>
  <p>to:</p>
  <pre><code>@import &quot;../../node_modules/bootstrap/scss/variables&quot;;
  </code></pre>
  <p>followed by this <a href="https://getbootstrap.com/docs/5.0/customize/sass/" rel="nofollow noreferrer">docs</a>. but the webpack <code>&quot;webpack&quot;: &quot;^4.36.0&quot;,</code> build shows this error:</p>
  <pre><code>    [0] ./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/sass-loader/dist/cjs.js!./src/public/bootstrap-lite.scss 572 bytes {0} [built] [failed] [1 error]
  
  ERROR in ./src/public/bootstrap-lite.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/sass-loader/dist/cjs.js!./src/public/bootstrap-lite.scss)
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: (&quot;primary&quot;: #0d6efd, &quot;secondary&quot;: #6c757d, &quot;success&quot;: #198754, &quot;info&quot;: #0dcaf0, &quot;warning&quot;: #ffc107, &quot;danger&quot;: #dc3545, &quot;light&quot;: #f8f9fa, &quot;dark&quot;: #212529) isn't a valid CSS value.
     ╷
  94 │ $theme-colors-rgb: map-loop($theme-colors, to-rgb, &quot;$value&quot;) !default;
     │                             ^^^^^^^^^^^^^
     ╵
    node_modules/bootstrap/scss/_variables.scss 94:29  @import
    src/public/bootstrap-lite.scss 18:9                root stylesheet
  </code></pre>
  <p>why did this happen? what should I do to fix this problem?</p>