sass-loader error = You may need an additional loader to handle the result of these loaders.

[p3x-robot]

Bug report

Cannot with build SASS anymore

Actual Behavior

./src/app/modules/material/scss/material/theme/_cory-mat-theme-dark-matrix.scss:1:0 - Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> .cory-mat-theme-dark-matrix {
|   /*
|   // disabled

./src/app/modules/material/scss/material/theme/_cory-mat-theme-dark-purple-green.scss:1:0 - Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> .cory-mat-theme-dark-purple-green {
|   background-color: #212121;
|   background: radial-gradient(circle, #000000, #212121);

Expected Behavior

Node sass works with Angular 13, 14 not

How Do We Reproduce?

It happened when I changed from Angular 13 to 14.

Please paste the results of npx webpack-cli info here, and mention other relevant information

assets by status 0 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages'
resolve './src' in '/home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages'
  using description file: /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src.wasm doesn't exist
      as directory
        existing directory /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src
          using description file: /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/package.json (relative path: ./src)
            using path: /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src/index
              using description file: /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/patrikx3/Projects/patrikx3/corifeus/corifeus-app-web-pages/src/index.wasm doesn't exist

webpack 5.73.0 compiled with 1 error and 1 warning in 84 ms

[alexander-akait]

You need css-loader, because you don't have it in:

./src/app/modules/material/scss/material/theme/_cory-mat-theme-dark-matrix.scss:1:0 - Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> .cory-mat-theme-dark-matrix {
|   /*
|   // disabled

[sanaa5127]

defaults 

I am facing same issue, what was the issue? and how did you resolve it?

[alexander-akait]

Looks like you forgot to add css-loader

[sanaa5127]

Looks like you forgot to add css-loader

The problem was resolved by adding .scss file in angular.json file in styles... Then it compiled successfully.. but after that nothing was displaying and It was showing "JIT compilation Unavailable" error in inspect console.

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[sanaa5127]

The problem was resolved by adding .scss file in angular.json file in styles... Then it compiled successfully.. but after that nothing was displaying and It was showing "JIT compilation Unavailable" error in inspect console.

On Mon, Jul 25, 2022, 2:54 PM Alexander Akait @.***> wrote:

Looks like you forgot to add css-loader

— Reply to this email directly, view it on GitHub https://github.com/webpack-contrib/sass-loader/issues/1061#issuecomment-1193832801, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2BZ6O77KWJFMVAGX23CSRDVVZP5FANCNFSM5YDOIA2Q . You are receiving this because you commented.Message ID: @.***>