解决vue.js+node.js安装SASS失败等问题

解决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

1. 进来后你可能有 一个或者多个sass版本号文件，全部删除掉，相当于清理的缓存。
2. 再cmd进入自己的项目根目录下运行
   安装依赖：

npm install

查看自己项目文件的 package.json文件
例:

查看是否安装上 node-sass 和 sass-loader
例:

如果没有这两个依赖 ，再运行一次 以下代码

npm install node-sass sass-loader --save

最终 安装成功 使用 scss语法进行编译

例：