[BUG] Failed to compile with webpack Encore

[TheoD02]

Hello all,

Before, thanks for the work you make ! I encountered a little problem with Webpack Encore (Provided with Symfony) I used on another project without any problem, but the new files appear to have a little problem or compatibility with the fresh new sass-loader.

package.json

        "@symfony/webpack-encore": "^3.0.0",
        "core-js": "^3.23.0",
        "file-loader": "^6.0.0",
        "regenerator-runtime": "^0.13.9",
        "sass": "^1.53.0",
        "sass-loader": "^13.0.0",
        "webpack-notifier": "^1.15.0"

Error :

Running webpack ...

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                                                       20:45:41

 error  in ./assets/scss/app.scss                                                                                                                                                                                                                                             20:45:41

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
47 │     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
   │                          ^^^^^^^
   ╵
  node_modules\bootstrap\scss\_functions.scss 47:26  rgba-css-var()
  node_modules\bootstrap\scss\_functions.scss 61:36  map-loop()
  assets\scss\_variables.scss 388:23                 @import
  assets\scss\app.scss 2:9                           root stylesheet

 error  in ./assets/scss/app.scss                                                                                                                                                                                                                                             20:45:41

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
47 │     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
   │                          ^^^^^^^
   ╵
  node_modules\bootstrap\scss\_functions.scss 47:26  rgba-css-var()
  node_modules\bootstrap\scss\_functions.scss 61:36  map-loop()
  assets\scss\_variables.scss 388:23                 @import
  assets\scss\app.scss 2:9                           root stylesheet
    at tryRunOrWebpackError (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:5055:12)
    at __webpack_require__ (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:5012:18)
    at C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:5083:20
    at symbolIterator (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\neo-async\async.js:3485:9)
    at done (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:4990:43
    at symbolIterator (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\neo-async\async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
47 │     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
   │                          ^^^^^^^
   ╵
  node_modules\bootstrap\scss\_functions.scss 47:26  rgba-css-var()
  node_modules\bootstrap\scss\_functions.scss 61:36  map-loop()
  assets\scss\_variables.scss 388:23                 @import
  assets\scss\app.scss 2:9                           root stylesheet
    at Object.<anonymous> (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[4].oneOf[1].use[2]!C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!C:\Users\Administrator\Documents\projects\fuvi-clan\assets\scss\app.scss:1:7)
    at C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\tapable\lib\Hook.js:14:14)
    at C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:5057:39
    at tryRunOrWebpackError (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:5055:12)
    at __webpack_require__ (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:5012:18)
    at C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack\lib\Compilation.js:5083:20
    at symbolIterator (C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\neo-async\async.js:3485:9)

Generated code for C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[4].oneOf[1].use[2]!C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!C:\Users\Administrator\Documents\projects\fuvi-clan\assets\scss\app.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n   ╷\n47 │     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));\n   │                          ^^^^^^^\n   ╵\n  node_modules\\bootstrap\\scss\\_functions.scss 47:26  rgba-css-var()\n  node_modules\\bootstrap\\scss\\_functions.scss 61:36  map-loop()\n  assets\\scss\\_variables.scss 388:23                 @import\n  assets\\scss\\app.scss 2:9                           root stylesheet");

Entrypoint theme-front-header-css 13 KiB = runtime.js
Entrypoint _tmp_copy 13 KiB (10.3 MiB) = runtime.js 39 auxiliary assets
webpack compiled with 2 errors
Notifications are disabled
Reason: DisabledForUser Please make sure that the app id is set correctly.
Command Line: C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe -pipeName \\.\pipe\notifierPipe-cf52453a-910a-4952-bf65-c20fa7ec8e9e -p C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\webpack-not
ifier\logo.png -m "Error: C:\Users\Administrator\Documents\projects\fuvi-clan\assets\scss\app.scss.webpack[javascript/auto]!=!!!C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].oneOf[1].use[1]!C:\Users\Administrator\Do
cuments\projects\fuvi-clan\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[4].oneOf[1].use[2]!C:\Users\Administrator\Documents\projects\fuvi-clan\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[4].oneOf[1].use[3]!C:\Users\Administrator\Documents\projects\fuvi-clan\assets\scss\app.scss
SassError: SassError: Undefined variable.
error Command failed with exit code 1.

When removing this lines in _variables.scss problem disapear : Problem is concerning the map-loop function, don't know much scss compiler... to help more at this time, i didn't investigate long time on it… If I found any solution, I will publish ;)

(Line 377 to 399 in version v2.0.0-rc.2)

// scss-docs-start utilities-text-colors
$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
) !default;
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
// scss-docs-end utilities-text-colors

// scss-docs-start utilities-bg-colors
$utilities-bg: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-bg)
  )
) !default;
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
// scss-docs-end utilities-bg-colors

[zuramai]

You should downgrade the sass-loader to ^12.6.0

[github-actions[bot]]

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.