解决vue.js+node.js安装SASS失败等问题
让我们直接看报错信息
ERROR Failed to compile with 1 errors 下午1:23:25
error in ./src/pages/home/index.vue?vue&type=style&index=0&lang=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: The module '\\?\C:\Users\Administrator\AppData\Roaming\npm-cache\node-sass\4.13.1\win32-x64-72_binding.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 72. This version of Node.js requires
NODE_MODULE_VERSION 83. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
at Object.Module._extensions..node (internal/modules/cjs/loader.js:1235:18)
at Module.load (internal/modules/cjs/loader.js:1034:32)
at Function.Module._load (internal/modules/cjs/loader.js:923:14)
at Module.require (internal/modules/cjs/loader.js:1074:19)
at require (internal/modules/cjs/helpers.js:72:18)
at module.exports (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\node-sass\lib\binding.js:19:10)
at Object.<anonymous> (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:1185:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1205:10)
at Module.load (internal/modules/cjs/loader.js:1034:32)
at Function.Module._load (internal/modules/cjs/loader.js:923:14)
at Module.require (internal/modules/cjs/loader.js:1074:19)
at require (internal/modules/cjs/helpers.js:72:18)
at getDefaultSassImplementation (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\sass-loader\dist\getDefaultSassImplementation.js:24:10)
at getSassImplementation (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\sass-loader\dist\getSassImplementation.js:19:72)
at Object.loader (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\sass-loader\dist\index.js:40:61)
at D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\webpack\lib\NormalModule.js:316:20
at D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at runSyncOrAsync (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
at iterateNormalLoaders (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at iterateNormalLoaders (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at Object.context.callback (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.module.exports (D:\Users\Administrator\Documents\HBuilderProjects\Cloudmeal_1\cloudy\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\index.js:60:8)
@ ./src/pages/home/index.vue?vue&type=style&index=0&lang=scss& 1:0-839 1:855-858 1:860-1696 1:860-1696
@ ./src/pages/home/index.vue
@ ./src/main.js?{"page":"pages%2Fhome%2Findex"}
上述问题是你没有安装 sass依赖
解决办法: CMD进入你的项目根目录下 运行 如下代码
npm install node-sass sass-loader --save
执行结果 如下:
在使用上诉安装依赖时 可能报错,且是大量的错误,那么可能是之前有安装过依赖且与现在安装的依赖冲突。
解决办法: 找到我的电脑以下路径:
C:\Users\Administrator\AppData\Roaming\npm-cache\node-sass
- 进来后你可能有 一个或者多个sass版本号文件,全部删除掉,相当于清理的缓存。
- 再cmd进入自己的项目根目录下运行
安装依赖:
npm install
查看自己项目文件的 package.json文件
例:
查看是否安装上 node-sass 和 sass-loader
例:
如果没有这两个依赖 ,再运行一次 以下代码
npm install node-sass sass-loader --save
最终 安装成功 使用 scss语法进行编译
例: