Next.js still imports as css even when loaded with raw-loader

[Janpot]

Link to the code that reproduces this issue

https://stackblitz.com/edit/stackblitz-starters-gjp1z5jm?file=app%2Fpage.tsx%3AL2

To Reproduce

1. import a css file using !!raw-loader!./foo.css syntax.
2. see that the raw source is imported

Current vs. Expected behavior

Currently, the styles are also applied, as can be seen by that background. Even though I want to just load its source.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Thu Jul 24 2025 06:30:29 GMT+0200 (Central European Summer Time)
  Available memory (MB): NaN
  Available CPU cores: 8
Binaries:
  Node: 20.19.1
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.4.2-canary.15 // Latest available version is detected (15.4.2-canary.15).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

Also tried this with resourceQuery

webpack(config) {
  config.module?.rules.push({
    resourceQuery: /raw/,
    type: "asset/source",
  });
  return config;
},

but that breaks even more. Rule.with doesn't seem to work at all in next.js. Would love to be able to leverage import attributes and do:

import foo from './foo.css' with { type: 'asset/source' }

[Ishuuu1213]

@Janpot @toolmantim @watsonian please assign it to me

[naaa760]

Hello @Janpot
This PR fixes the issue where CSS files imported with raw-loader were still being processed as styles instead of returning raw source content. The fix adds webpack rules to handle raw-loader patterns before CSS processing, ensuring users get raw source when using raw-loader as expected.

[battlebroad121]

Nice