Build error with webpack/sass-loader of modern Sass JS API

[taketo1113]

When use webpack/sass-loader of modern Sass JS API, it raise build error with can't find a scss path of bootstrap package.

Steps to reproduce:

Can't find stylesheet to import.
  ╷
5 │ @import "node_modules/bootstrap/scss/functions";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/select2-bootstrap-5-theme/src/select2-bootstrap-5-theme.scss 5:9  @import
  _path_/application.scss 12:9                                 root stylesheet
 @ ./_path_/application.scss

• webpack: 5.94.0
• sass-loader: 16.0.1
• sass: 1.77.8

The following seems to fix the issue in webpack/sass-loader:

-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";

https://github.com/apalfrey/select2-bootstrap-5-theme/blob/ab448b2ac36a6f7f90b162e384ca2b1469a3cc1f/src/select2-bootstrap-5-theme.scss#L5-L7

[taketo1113]

It have workaround to use legacy api of sass-loader option.

• sass-loader: v16.0.0
  • https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#1600-2024-07-26

If use legacy api of sass-loader, add following settings in webpack config.

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              api: "legacy",
              // Your options
            },
          },
        ],
      },
    ],
  },
};