[Bug]: Error occurs when using import with additionalData

[xuexb]

Version

System:
    OS: macOS 15.1.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 562.38 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.1.1
  npmPackages:
    @rsbuild/core: ^1.1.11 => 1.1.11
    @rsbuild/plugin-react: ^1.1.0 => 1.1.0
    @rsbuild/plugin-sass: ^1.1.2 => 1.1.2

Details

场景：

• 项目中定义 SCSS 变量/方法（ src/_var.scss ），并在 additionalData 配置中使用 @use 全局加载
• 项目依赖三方的样式，使用 @import "xxx" 去加载

现在发现这2个结合时，打包后的产物会把 @use xxx 打包进去。当不使用 @import "xxx" 加载三方时，就没这个问题。

Reproduce link

https://github.com/xuexb/rsbuild-codesandbox-example

Reproduce Steps

1. nvm use
2. pnpm install
3. pnpm build
4. cat dist/static/css/index.*.css

[chenjiahan]

This should be a problem with sass-loader + css-loader.

I have reproduced it with a minimal configuration using Rspack or webpack:

const config = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        type: "javascript/auto",
        use: [
          rspack.CssExtractRspackPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "sass-loader",
            options: {
              additionalData: [`@use "./_var.scss" as *;`].join(""),
            },
          },
        ],
      },
    ],
  },
};

I would recommend:

• File an issue to the css-loader/issues
• Avoid using the deprecated @import syntax.