Vue 项目安装 scss 以及报错的解决方法

以你之姓@ 2023-07-09 10:25 8阅读 0赞

#### 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`, 终于安装成功了。

--------------------

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临  
![在这里插入图片描述][20201130105952793.jpg_pic_center]

[20201130105952793.jpg_pic_center]: https://img-blog.csdnimg.cn/20201130105952793.jpg#pic_center