Node Sass could not find a binding for your current environment

Typescript introduces css and directly reports an error:

Node Sass could not find a binding for your current environment

The specific error is as follows:

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/index.css)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Missing binding C:\Users\tenrzzhang\Desktop\ten\reactapp\node_modules\node-sass\vendor\win32-x64-88\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 15.x

Found bindings for the following environments:
  - Windows 64-bit with Node.js 14.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
 @ ./src/index.css 2:12-127 9:17-24 13:15-22
 @ ./src/index.tsx

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/index.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: PostCSS received undefined instead of CSS string
    at new Input (C:\Users\tenrzzhang\Desktop\ten\reactapp\node_modules\css-loader\node_modules\postcss\lib\input.js:22:13)
    at parse (C:\Users\tenrzzhang\Desktop\ten\reactapp\node_modules\css-loader\node_modules\postcss\lib\parse.js:8:15)
    at new LazyResult (C:\Users\tenrzzhang\Desktop\ten\reactapp\node_modules\css-loader\node_modules\postcss\lib\lazy-result.js:122:16)
    at Processor.process (C:\Users\tenrzzhang\Desktop\ten\reactapp\node_modules\css-loader\node_modules\postcss\lib\processor.js:33:12)
    at Object.loader (C:\Users\tenrzzhang\Desktop\ten\reactapp\node_modules\css-loader\dist\index.js:139:51)
 @ ./src/index.css 2:12-127 9:17-24 13:15-22
 @ ./src/index.tsx

Check webpack configuration

{ test: /\.s?[ac]ss$/, use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ] },

Module loaders can be chained. Each loader in the chain will transform the resource. Chains are executed in reverse order. The first loader passes its result (transformed resource) to the next loader, and so on. Finally, webpack expects the last loader in the chain to return JavaScript.

The order of the loaders should be guaranteed: 'style-loader'first, and 'css-loader'later. If this convention is not followed, webpack may throw errors.

 

I used sass-loader here. According to the prompt, I need to execute the command to update sass-loader, but there is no network, so I removed sass-loader first. Run it again without reporting an error.

{
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },

 

Guess you like

Origin blog.csdn.net/kaiyuantao/article/details/115329674