2020-12-05

使用angular创建项目选择scss或sass时报错(样式方案选择css、less项目不报错)

完整报错信息

PS F:\angular\app> ng serve
\ Generating browser application bundles (phase: building)...## There is an issue with `node-fibers` ##
`F:\angular\app\node_modules\fibers\bin\win32-x64-88\fibers.node` is missing.
​
Try running this to fix the issue: D:\language\nvm\v15.2.0\node.exe F:\angular\app\node_modules\fibers/build
Error: The module '\\?\F:\angular\app\node_modules\fibers\bin\win32-x64-88\fibers.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 83. This version of Node.js requires
NODE_MODULE_VERSION 88. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
    at Object.Module._extensions..node (node:internal/modules/cjs/loader:1161:18)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (F:\angular\app\node_modules\fibers\fibers.js:14:39)
    at Module._compile (node:internal/modules/cjs/loader:1102:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at getSassOptions (F:\angular\app\node_modules\sass-loader\dist\utils.js:134:25)
    at Object.loader (F:\angular\app\node_modules\sass-loader\dist\index.js:36:49)
    at LOADER_EXECUTION (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
    at runSyncOrAsync (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
## There is an issue with `node-fibers` ##
`F:\angular\app\node_modules\fibers\bin\win32-x64-88\fibers.node` is missing.
​
Try running this to fix the issue: D:\language\nvm\v15.2.0\node.exe F:\angular\app\node_modules\fibers/build
Error: The module '\\?\F:\angular\app\node_modules\fibers\bin\win32-x64-88\fibers.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 83. This version of Node.js requires
NODE_MODULE_VERSION 88. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
    at Object.Module._extensions..node (node:internal/modules/cjs/loader:1161:18)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (F:\angular\app\node_modules\fibers\fibers.js:14:39)
    at Module._compile (node:internal/modules/cjs/loader:1102:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at getSassOptions (F:\angular\app\node_modules\sass-loader\dist\utils.js:134:25)
    at Object.loader (F:\angular\app\node_modules\sass-loader\dist\index.js:36:49)
    at LOADER_EXECUTION (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
    at runSyncOrAsync (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
√ Browser application bundle generation complete.
​
Initial Chunk Files | Names         |      Size
styles.js           | styles        | 342.81 kB
polyfills.js        | polyfills     | 340.43 kB
vendor.js           | vendor        | 338.80 kB
runtime.js          | runtime       |   6.15 kB
main.js             | main          |   1.70 kB
​
                    | Initial Total |   1.01 MB
​
Build at: 2020-12-05T04:19:05.232Z - Hash: 5d3f2eb931afcb49a2b7 - Time: 5892ms
Error: ./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binary. See message above.
    at Object.<anonymous> (F:\angular\app\node_modules\fibers\fibers.js:23:9)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at getSassOptions (F:\angular\app\node_modules\sass-loader\dist\utils.js:134:25)
    at Object.loader (F:\angular\app\node_modules\sass-loader\dist\index.js:36:49)
    at F:\angular\app\node_modules\webpack\lib\NormalModule.js:316:20
    at F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at VirtualFileSystemDecorator.readFile (F:\angular\app\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:44:13)
    at processResource (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:202:11)
    at iteratePitchingLoaders (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:158:10)
    at iteratePitchingLoaders (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (F:\angular\app\node_modules\loader-runner\lib\loadLoader.js:47:3)
    at iteratePitchingLoaders (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at F:\angular\app\node_modules\loader-runner\lib\LoaderRunner.js:176:18
    at loadLoader (F:\angular\app\node_modules\loader-runner\lib\loadLoader.js:47:3)
​
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Missing binary. See message above.
    at Object.<anonymous> (F:\angular\app\node_modules\fibers\fibers.js:23:9)
    at Module._compile (node:internal/modules/cjs/loader:1102:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
    at Module.load (node:internal/modules/cjs/loader:967:32)
    at Function.Module._load (node:internal/modules/cjs/loader:807:14)
    at Module.require (node:internal/modules/cjs/loader:991:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at getSassOptions (F:\angular\app\node_modules\sass-loader\dist\utils.js:134:25)
    at Object.loader (F:\angular\app\node_modules\sass-loader\dist\index.js:36:49)
​
​
​
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **      

// 访问这个网站只有一行报错信息，项目是跑不出来的

其中有一句报错信息是这样的：

Error: The module '\\?\F:\angular\app\node_modules\fibers\bin\win32-x64-88\fibers.node'
was compiled against a different Node.js version using
意思是module目录下的一个fibers.node和一个不同的node版本冲突(我用的node版本比较新，15.2版本的，因为前段时间买的新电脑，新配的环境)造成的      

解决办法：

根据报错信息中包含的目录信息，把本地的node_modules下的fibers文件整个删除掉
    1. 刚开始用的npm uninstall fibers，重跑仍然不行，该目录下依然有这个文件
    2. 后来直接项目本地node_modules目录下的fibers文件整个删除掉就好了（我是给该文件剪切到外层文件夹中，怕其他地方也可能会用到？其实也相当于删除了）
然后项目就可以正常跑了