File to import not found or unreadable

[b5414]

• NPM version (npm -v): 8.13.1
• Node version (node -v): v16.15.1
• Node Process (node -p process.versions):
• Node Platform (node -p process.platform): win32
• Node architecture (node -p process.arch): x64
• node-sass version (node -p "require('node-sass').info"): node-sass 7.0.3 (Wrapper) [JavaScript] & libsass 3.5.5 (Sass Compiler) [C/C++]
• npm node-sass versions (npm ls node-sass): [email protected] & ReactScripts > sass loader > [email protected] (deduped)

The Issue:

Time to time I get a banner with an import error, absolute random, not sure what is it

The Error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: File to import not found or unreadable: F:\github\FOLDER\src\assets\styles\colors.scss.
        on line 175 of src/components/Container/Container.module.scss
>> 		@import '../../assets/styles/colors.scss';

The Code:

// Container.module.scss

.wrapper {
	&:has(h1) {
		// line 175:
		@import '../../assets/styles/colors.scss';

		> h1 {}
	}
}

// src\components\Container\Container.module.scss

---

// colors.scss

.red {
	color: var(--_red);
	background-color: var(--red_light);
}

// src\assets\styles\colors.scss