SassError: expected "{"

[C Alonso C Ortega]

Bug report

Actual Behavior

webpack-dev-server throw following exception for every scss and css on my project app

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
2 │       import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                     ^
  ╵

webpack 5.75.0 compiled with 57 errors in 543 ms

Expected Behavior

webpack-dev-server works correctly

How Do We Reproduce?

configure webpack-dev-server

//webpack
const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const dev = require('./webpack.dev.js');

module.exports = merge(common, dev, {
  module: {
    rules: [
      {
        // docs https://webpack.js.org/loaders/sass-loader/ https://runebook.dev/es/docs/webpack/plugins/mini-css-extract-plugin
        test: /\.(sa|sc|c)ss$/,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ]
  },
  // target: 'web',
  devServer: {
    // Specifying a host to use
    host: 'localhost',

    // hot: false,

    // Specifying a port number
    port: 7321,

    // This is the key to our approach
    // With a backend on http://localhost/PROJECTNAME/
    // we will use this to enable proxying
    proxy: {
      // 'proxy' config example https://kumardeepak.xyz/blog/configure-webpack-5-devserver-with-a-php-website-hosted-on-localhost/
      // Star(*) defines all the valid requests
      '/project-2': {
        // Specifying the full path to the dist folder
        // Replace "project" with your project folder name
        target: `http://localhost:80/project-2/`,
        pathRewrite: { '^/project-2': '' },
      },
    },

    static: {
      // https://webpack.js.org/configuration/dev-server/#publicpath
      directory: path.join(__dirname, 'assets', 'js', 'webpack', 'dist'),
      publicPath: '/serve-public-path-url',
    },

    open: {
      target: ['project-2'],
      app: {
        name: 'chrome',
        arguments: ['--incognito', '--new-window'],
      },
    },

    client: {
      progress: true,
    },

    devMiddleware: {
      // publicPath: '/publicPathForDevServe',
      // writeToDisk: true,
    },

    // also add this https://webpack.js.org/configuration/dev-server/#devserverwatchfiles
  }
});

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

  System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics
    Memory: 7.53 GB / 15.37 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.61)
    Internet Explorer: 11.0.19041.1566
  Packages:
    babel-loader: ^8.1.0 => 8.2.5
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    copy-webpack-plugin: ^10.2.4 => 10.2.4
    css-loader: ^6.7.3 => 6.7.3
    css-minimizer-webpack-plugin: ^3.4.1 => 3.4.1
    expose-loader: ^3.1.0 => 3.1.0
    file-loader: ^6.2.0 => 6.2.0
    html-webpack-plugin: ^5.5.0 => 5.5.0
    json-loader: ^0.5.7 => 0.5.7
    minify-html-webpack-plugin: ^1.1.6 => 1.1.6
    remove-files-webpack-plugin: ^1.5.0 => 1.5.0
    sass-loader: ^13.2.0 => 13.2.0
    style-loader: ^3.3.1 => 3.3.1
    terser-webpack-plugin: ^5.3.6 => 5.3.6
    webpack: ^5.75.0 => 5.75.0
    webpack-bundle-analyzer: ^4.5.0 => 4.5.0
    webpack-cli: ^5.0.1 => 5.0.1
    webpack-dev-server: ^4.11.1 => 4.11.1
    webpack-merge: ^5.8.0 => 5.8.0
    webpack-open-browser: ^2.0.0 => 2.0.0
    webpack-shell-plugin-next: ^2.2.2 => 2.2.2
    workbox-webpack-plugin: ^6.5.1 => 6.5.3

[Alexander Akait]

Can you create minimum reproducible test repo? Sounds like you don't have some extensions

[Alexander Akait]

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