SPFx solution cannot be built with HEFT tooling

[ltdu]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [X] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version: 1.20
• SPFx tooling version: 1.20.2
• Node.js version: 18.20.4

Describe the bug / error

SharePoint Framework YO generator supports --use-heft parameter, which scaffolds solution to use HEFT instead of usual GULP. However, currently building such solution fails in webpack step:

 ---- build started ----
[build:clean] Deleted 0 files and 6 folders
[build:set-browserslist-ignore-old-data-env-var] Setting environment variable BROWSERSLIST_IGNORE_OLD_DATA=1
[build:sass] Generating sass typings...
[build:sass] Generated sass typings
[build:typescript] Using TypeScript version 5.3.3
[build:lint] Using ESLint version 8.57.0
[build:typescript] Copied 10 folders or files and linked 0 files
[build:webpack] Using Webpack version 5.88.2
[build:webpack] Running Webpack compilation
[build:webpack] Error: lib/webparts/helloWorld/HelloWorldWebPart.module.scss:1:0 - Module parse failed: Unexpected character '@' (1:0)
[build:webpack] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[build:webpack] > @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
[build:webpack] |
[build:webpack] | .helloWorld {
 ---- build encountered an error (7.131s) ----
-------------------- Failed (7.14s) --------------------
Encountered 1 error
  [build:webpack] lib/webparts/helloWorld/HelloWorldWebPart.module.scss:1:0 - Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
| .helloWorld {
 ELIFECYCLE  Command failed with exit code 1.

As far as I can tell, problem originates in @microsoft/spfx-heft-plugins package. There is webpackConfigurationPlugin plugin which seems to be responsible for providing required configuration, including webpack loaders. I could find CSS loaders, but configuration seems broken:

// @microsoft\spfx-heft-plugins\lib\plugins\webpackConfigurationPlugin\WebpackConfigurationGenerator.js (L:293)
{
    ...exports.COMMON_RULE_OPTIONS,
    use: moduleScssCssLoaders,
    test: /\.module\.scss\.css$/i
},
{
    ...exports.COMMON_RULE_OPTIONS,
    use: cssLoaders,
    test: /(?<!\.module(\.scss?))\.css$/
},

• neither of those regular expressions will pick *.module.scss for processing
• moduleScssCssLoaders and cssLoaders are essentially the same - they use @microsoft/sp-css-loader which does not have scss processing capability

Steps to reproduce

1. Create new SPFx web part solution with HEFT support

yo @microsoft/sharepoint --use-heft

2. (Optional) Add [email protected], because otherwise newer version maybe picked up which is not supported by used tools

npm install [email protected] --save-dev --save-exact

3. Build

npm run build

Expected behavior

Solution is built successfully