Vue 项目安装 scss 以及报错的解决方法 --- Window10 系统 和 Mac OS 系统

1. 安装sass依赖

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

第一种：Module build failed: TypeError: this.getResolve is not a function

如果运行之后项目报错

Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (C:\Users\DELL\Desktop\fantastic-macarons\node_modules\sass-loader\dist\index.js:52:26)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-375 13:3-17:5 14:22-383
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

那是sass-loader 版本太高, 更换成 7.3.1

 npm uninstall sass-loader（卸载当前版本）
 npm install sass-loader@7.3.1 --save-dev

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}

就可以在别的文件中引用

引入scss文件，使用

@import '../assets/scss/triangle.scss'

不用使用

@import url('../assets/scss/triangle.scss');

会产生报错

第二种：Syntax Error: Error: PostCSS received undefined instead of CSS string

 ERROR  Failed to compile with 1 error7:07:54 ├F10: PM┤

 error  in ./src/components/TotalSales/index.vue?vue&type=style&index=0&id=86e7da4a&lang=scss&scoped=true&

Syntax Error: Error: PostCSS received undefined instead of CSS string


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TotalSales/index.vue?vue&type=style&index=0&id=86e7da4a&lang=scss&scoped=true& 4:14-478 14:3-18:5 15:22-486

问题原因

node-sass 和 sass-loader 版本与当前的不兼容，安装对应版本的包即可。

解决方案

卸载node-sass 和 sass-loader

npm uninstall node-sass sass-loader

安装对应版本的包

npm install node-sass@4.14.1 sass-loader@8.0.0 --dev

第三种：Cannot find module ‘node-sass’

按照往常的思路，应该是 npm install 的时候，出错了。于是我选择重新 npm install node-sass -D,但是安装的时候，报错了

gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'D:\\vue\\readbook-admin\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@12.15.0 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (D:\vue\readbook-admin\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (D:\vue\readbook-admin\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (D:\vue\readbook-admin\node_modules\which\which.js:80:29)
gyp verb `which` failed     at D:\vue\readbook-admin\node_modules\which\which.js:89:16
gyp verb `which` failed     at D:\vue\readbook-admin\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at D:\vue\readbook-admin\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:158:21)
gyp verb `which` failed  python2 Error: not found: python2
gyp verb `which` failed     at getNotFoundError (D:\vue\readbook-admin\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (D:\vue\readbook-admin\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (D:\vue\readbook-admin\node_modules\which\which.js:80:29)
gyp verb `which` failed     at D:\vue\readbook-admin\node_modules\which\which.js:89:16
gyp verb `which` failed     at D:\vue\readbook-admin\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at D:\vue\readbook-admin\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqCallback.oncomplete (fs.js:158:21) {
gyp verb `which` failed   stack: 'Error: not found: python2\n' +
gyp verb `which` failed     '    at getNotFoundError (D:\\vue\\readbook-admin\\node_modules\\which\\which.js:13:12)\n' +
gyp verb `which` failed     '    at F (D:\\vue\\readbook-admin\\node_modules\\which\\which.js:68:19)\n' +
gyp verb `which` failed     '    at E (D:\\vue\\readbook-admin\\node_modules\\which\\which.js:80:29)\n' +
gyp verb `which` failed     '    at D:\\vue\\readbook-admin\\node_modules\\which\\which.js:89:16\n' +
gyp verb `which` failed     '    at D:\\vue\\readbook-admin\\node_modules\\isexe\\index.js:42:5\n' +
gyp verb `which` failed     '    at D:\\vue\\readbook-admin\\node_modules\\isexe\\windows.js:36:5\n' +
gyp verb `which` failed     '    at FSReqCallback.oncomplete (fs.js:158:21)',
gyp verb `which` failed   code: 'ENOENT'
gyp verb `which` failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python C:\Users\DELL\AppData\Local\Programs\Python\Python37-32\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\DELL\AppData\Local\Programs\Python\Python37-32\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                                ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:295:12)
gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
gyp ERR! stack     at maybeClose (internal/child_process.js:1021:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\vue\\readbook-admin\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\vue\readbook-admin\node_modules\node-sass
gyp ERR! node -v v12.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.14.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.14.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\DELL\AppData\Roaming\npm-cache\_logs\2020-05-12T01_07_50_553Z-debug.log

老实说第一次看见这个报错，不明所以，后来上网百度了一下，觉得可能是版本太低了。查看了一下 package.json 的版本号，是 4.4.1 ，抱着试一试的心态，我安装了 最新版本的 npm install node-sass@latest -D, 终于安装成功了。

---

以上是在 window10 系统

Mac OS 系统上使用 node-sass 基本上都是报错的，网上也有很多博主提出解决方法。不过这些方法看起来都挺麻烦的，笔者自己也试过，大多数都是失败的。

目前笔者看来有效的一种解决方法就是在构建 Vue 项目的时候，选择 CSS 预编译器时，不要选择 node-sass，而是选择 dart-sass。这样，项目安装的时候，就会安装 sass，而不是 node-sass。

如果是老项目迁移到 Mac OS 系统上，也是建议卸载项目依赖中的 node-sass，安装 sass。

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临