Getting outdated caniuse-lite warning when compiling SCSS - update command not working

Other Questions NPM
1

I keep getting this annoying warning whenever I try to compile my SCSS files:

Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist

I already tried running the suggested command but the warning still shows up. Here are all the things I attempted to fix this:

  • Ran npm update caniuse-lite browserslist as suggested
  • Completely removed node_modules folder and ran npm install again
  • Updated everything with npm update
  • Reinstalled both autoprefixer and browserslist packages
  • Manually updated package versions in package.json to latest

None of these solutions worked. However, I noticed that when I remove this configuration from my compilerconfig.json file:

"settings": {
  "prefixOptions": "> 2%"
}

The compilation works without any warnings. This makes me think the problem is somehow connected to the autoprefixer plugin. Has anyone else encountered this issue and found a proper solution?

2

same issue here! what worked for me was running npm cache clean --force, then deleting the package-lock.json file too, not just node_modules. after that, reinstall everything. turns out cached data was causing the browserslist database updates to fail.

3

Been there so many times. It’s not outdated packages - it’s conflicting versions between your local dependencies and what the compiler wants.

Delete your package-lock.json file (not just node_modules), then run npm install again. The lock file clings to old dependency trees even after updates.

Still broken? Clear npm cache with npm cache clean --force before reinstalling.

Honestly, I gave up wrestling with build tool issues years ago. Now I automate my entire SCSS pipeline through Latenode. It handles dependency management, runs compilation checks, and pushes compiled CSS to staging automatically.

No version conflicts, no manual commands. Set up the workflow once and you’re done. Way better than debugging npm dependency hell every few months.

4

You’re right about the prefixOptions setting. The problem happens because your SCSS compiler can’t resolve the browserslist database properly. When you remove that setting, autoprefixer just uses default browser support and skips the database lookup completely. Update your browserslist config in package.json instead of the compiler config. Add a “browserslist” field with your target browsers there. This keeps it separate from SCSS compilation and usually fixes the caniuse-lite warnings since the database gets read at package level, not during compilation. Or swap out the percentage-based query for something like “last 2 versions” in your compilerconfig.json. Percentage queries trigger more database checks and expose the version mismatch issue.

5

I encountered a similar problem not too long ago. The issue often lies in how browserslist interacts with caniuse-lite. First, try running npx browserslist@latest --update-db to clear the browserslist cache. After that, check for multiple caniuse-lite versions by executing npm ls caniuse-lite. It’s common for some devDependencies to be stuck on older versions, which leads to this warning. Update any problematic packages, and if you have a .browserslistrc file, ensure that it matches your project’s requirements to avoid potential conflicts.