[Bug]: @rsbuild/plugin-sass additionalData breaks css imports in Sass (rsbuild 0.7.1)

[CPatchane]

Version

System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 73.77 MB / 16.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Browsers:
    Brave Browser: 120.1.61.116
    Chrome Canary: 127.0.6507.0
    Safari: 16.6
  npmPackages:
    @rsbuild/core: ^0.7.1 => 0.7.1
    @rsbuild/plugin-sass: ^0.7.1 => 0.7.1

Details

Hi 👋
When using additionalData through the new Sass plugin sassLoaderOptions, this breaks all css imports and throw that issue:

  × Module build failed:
  ╰─▶   × Error: Sass variables aren't allowed in plain CSS.
        │   ╷
        │ 1 │ $__INJECTED_THROUGH_RSPACK__: #fff;

Note: It did work correctly with rsbuild 0.6.5 and the builtin sass system or webpack5 + sass-loader.

Reproduce link

https://github.com/CPatchane/rsbuild-sass-issue

Reproduce Steps

Run pnpm build|dev

[chenjiahan]

@import is not recommended to use in Sass, you can use @use instead:

https://sass-lang.com/documentation/at-rules/import/

I think this might be a bug or unsupported case of sass-loader.

[chenjiahan]

I think this error occurs because Rsbuild now uses the modern Sass API by default.

You can also switch the legacy Sass API to solve this issue:

import { defineConfig } from "@rsbuild/core";
import { pluginSass } from "@rsbuild/plugin-sass";

const testVariable = "#fff";

export default defineConfig({
  plugins: [
    pluginSass({
      sassLoaderOptions: {
+       api: "legacy",
        additionalData: `$__INJECTED_THROUGH_RSPACK__: ${testVariable};`,
      },
    }),
  ],
});

https://github.com/webpack-contrib/sass-loader?tab=readme-ov-file#api

[CPatchane]

@import is not recommended to use in Sass, you can use @use instead:

Oh you're perfectly right, using @use I didn't have that issue anymore, so it's time to update that code.
Same thing if we keep the @import but use api: "legacy", then I think this is due to the modern Sass API like you said.

Thanks a lot for your lights on this and the quick answers, I have workarounds/fixes to my issue here 🙌