Understanding combining options for scss compilation

[zackarychapple]

When working on the Angular implementation we were testing the sass-loader. In the react-with-scss example it says to use the sass-loader together with type:css.

When we try to do this on the Angular example we get the following error.

{
    test: /\.?(scss)$/,
    resourceQuery: /\?ngResource/,
    use: [
        { loader: "sass-loader" }
    ],
    type: "css"
},

Error: The loader "/Users/zackarychapple/code/rspack/examples/angular/src/app/app.component.scss" didn't return a string.
    at addError (/Users/zackarychapple/code/packages/ngtools/webpack/src/ivy/diagnostics.ts:35:27)
    at /Users/zackarychapple/code/packages/ngtools/webpack/src/resource_loader.ts:217:21
    at eval (eval at create (/Users/zackarychapple/code/rspack/node_modules/tapable/lib/HookCodeFactory.js:75:10), <anonymous>:17:1)
    at new Promise (<anonymous>)
    at Hook.eval [as promise] (eval at create (/Users/zackarychapple/code/rspack/node_modules/tapable/lib/HookCodeFactory.js:75:10), <anonymous>:6:8)
    at Hook.PROMISE_DELEGATE [as _promise] (/Users/zackarychapple/code/rspack/node_modules/tapable/lib/Hook.js:22:14)
    at Compiler._Compiler_processAssets (/Users/zackarychapple/code/rspack/packages/rspack/src/compiler.ts:607:5)

When we try to build without the type:css we get a different error:

{
    test: /\.?(scss)$/,
    resourceQuery: /\?ngResource/,
    use: [
        { loader: "sass-loader" }
    ]
},

error[javascript]: JavaScript parsing error
  ┌─ src/app/app.component.scss:1:1
  │
1 │ :host{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;color:#333;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  │ ^ Expression expected

Using raw-loader in combination with sass loader works as expected.

{
    test: /\.?(scss)$/,
    resourceQuery: /\?ngResource/,
    use: [        
        { loader: "raw-loader" },
        { loader: "sass-loader" }
    ]
},

I do not know if this is a bug, or expected behavior but I'd love to understand how type, and the combinations of loaders works.

[hardfist]

we may need a demo to debug