Recently node was updated, I upgraded from Node14.6 to Node 16.4, and there was no problem for my new project. But today I asked to add requirements in an old project and found that the code was running with an error.

Project startup error

Error: Nod-sass does not yet support your current environment: Windows 64-bit

Based on past experience, deletenode_modulesAnd then re-follownode-sassYou will notice that the NPM installation is always reporting errors as follows:. A series of inexplicable errors. And then I found a problem,node-sassThe version that has been installed for me by default is4.1.4Go to NPM and see how many versions there are, and see what follows.

To solve

Check the Issues in Git to find a version problem. Issues address, address corresponding to the version

At this point, you know, what we’re going to do

  • The first method is to uninstall the package and install the new package.
  • The second method is to reduce the node environment

How hard is it for me to go further? How can I be downgraded? The tide of history is certainly moving forward, and I cannot retreat. Let’s upgrade the bag.

uninstall

Uninstall the node-sass sass-loadder sass package

If you want to install nod-Sass, you need to install nod-Sass 6. By default, you install Nod-Sass 4. NPM install node-sass@6 sass-loadder sass -d or NPM install –save-dev node-sass@6 sass-loadder sass

After installing the package, we are happy to report an error:

Since this error is from Sass-Loader, let’s go to issues to see if anyone has mentioned this problem. Fortunately, someone did, and the solution was as follows

Webpack5 supports Sass-Loader 11(I installed 11), so I must continue to upgrade.

Webpack4 upgrade webpack5

Webpack, webpack-cli webpack-dev-serve and webPack plug-ins for the project. Well, I’ll uninstall them and reinstall them.

Run the NPM uninstall webpack webpack-cli webpack-dev-serve command, and then NPM ininstall webpack webpack-cli webpack-dev-serve command

Webpack upgrade issues

There will certainly be some minor changes to the configuration files and commands for this upgrade. Check out the official website for details

Command to change

The configuration file changes

These changes are certainly there, but webpack5 does a pretty good job of booting up.

Start the result

See here, it must be a success, otherwise there will be no results, when there is a problem, I can’t lose heart, the big deal I will git Revese, enjoy the process.

Development Environment Results

Generate environmental results

reference

  • Github.com/webpack-con…
  • Github.com/sass/node-s…
  • Webpack.docschina.org/configurati…