vue项目安装scss常见报错处理方式

作者:隔壁丿老苏

这篇文章主要介绍了vue项目安装scss常见报错处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

安装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

安装了 最新版本的 npm install node-sass@latest -D。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • vue混入mixin流程与优缺点详解
    vue混入mixin流程与优缺点详解
    2022-09-09
  • Vue.js element-plus使用图标不显示问题的解决方式
    Vue.js element-plus使用图标不显示问题的解决方式
    2022-09-09
  • Vue3 如何通过虚拟DOM更新页面详解
    Vue3 如何通过虚拟DOM更新页面详解
    2022-09-09
  • Vue弹窗组件的实现方法
    Vue弹窗组件的实现方法
    2022-09-09
  • vue项目安装scss常见报错处理方式
    vue项目安装scss常见报错处理方式
    2022-09-09
  • vue3中emit('update:modelValue')使用简单示例
    vue3中emit('update:modelValue&apos
    2022-09-09
  • vue3项目如何国际化实战指南
    vue3项目如何国际化实战指南
    2022-09-09
  • VUE引入腾讯地图并实现轨迹动画的详细步骤
    VUE引入腾讯地图并实现轨迹动画的详细步骤
    2022-09-09
  • 美国设下计谋,用娘炮文化重塑日本,已影响至中国
    美国设下计谋,用娘炮文化重塑日本,已影响至中国
    2021-11-19
  • 时空伴随者是什么意思?时空伴随者介绍
    时空伴随者是什么意思?时空伴随者介绍
    2021-11-09
  • 工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    2021-11-05
  • 2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2021-10-26
  • 电脑版 - 返回首页

    2006-2023 脚本之家 JB51.Net , All Rights Reserved.
    苏ICP备14036222号