Skip to content

[Bug]: Errors in SCSS files stop tracking changes in all .scss files, while .js files continue to be tracked correctly. #8075

@BazukenDev

Description

@BazukenDev

System Info

System:
OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 5.31 GB / 7.60 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.0/bin/yarn
npm: 10.8.1 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 9.10.0 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
npmPackages:
@rspack/cli: ^1.0.8 => 1.0.8
@rspack/core: ^1.0.8 => 1.0.8

Details

Once an error occurs in an .scss file, the watch mode stops tracking changes in all .scss files. Only .js files and index.scss continue to be watched and trigger recompilation.

The watch mode should continue tracking changes in .scss files, even after encountering and resolving errors.

I am unable to use the dev server with watch mode due to this issue. Therefore, I need rspack build --watch to remain active, even if errors occur during the process

// @ts-check

const path = require('path');
const rspack = require('@rspack/core');
const sass = require('sass-embedded');

/** @type {import('@rspack/cli').Configuration} */
let config = {
  name: 'sass-watch-test',
  mode: "development",

  cache: false,
  entry: {
    main: path.resolve('./app/src/index.js')
  },
  output: {
    filename: 'app-[name].js',
    path: path.resolve('./app/public'),
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({
      filename: 'app-[name]-styles.css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        type: 'javascript/auto',
        loader: 'builtin:swc-loader',
        exclude: [/node_modules/],
      },
      {
        test: /\.s[ac]ss$/i,
        parser: {
          'css/auto': {
            namedExports: false,
          },
        },
        use: [
          {
            loader: rspack.CssExtractRspackPlugin.loader,
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              api: 'modern-compiler',
              implementation: sass,
              sassOptions: {
                cache: false
              },
            },
          },
        ],
      },
    ],
  },
  experiments: {
    css: true,
  },
  optimization: {
    emitOnErrors: true,
  },
  stats: {
    warnings: false
  }
}

module.exports = config;

Reproduce link

https://github.com/BazukenDev/rspack-scss

Reproduce Steps

  1. Run "rspack build -w -c rspack.config.js".
  2. Introduce an error in an .scss file and save it (not index.scss).
  3. See the build error in the console.
  4. Correct the error in the .scss file and save it.
  5. No further compilation logs appear in the console, indicating that the watch process was not triggered.
  6. Modify a .js or index.scss file and save it.
  7. The console shows successful compilation logs, including the .scss changes.

Metadata

Metadata

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions