uni-app使用sass历程

川长思鸟来 2022-11-16 10:43 15阅读 0赞

本文只是记录个人使用sass遇到的一些问题！！！！并非使用教程！！！！最后我也成功了就是。

这是用vue-cli创建的项目使用过程，hbuilderx创建的项目无需这么复杂，直接用就好。

1.  安装sass

npm install sass-loader --save-dev

运行报错：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

原因：  
sass版本太高  
解决办法：

npm uninstall sass-loader
    npm install sass-loader@8.0.0 --save-dev

1.  运行报错：Module build failed: Error: Cannot find module ‘node-sass’。  
    问题：  
    没有node-sass模块  
    解决办法：

npm install node-sass --save-dev

1.  运行报错：Node Sass version 5.0.0 is incompatible with^4.0.0  
    问题：  
    sass版本太高  
    解决办法：

npm uninstall node-sass
    npm install node-sass@4.14.1 -D

1.  安装报错：

npm ERR! code EPERM
    npm ERR! syscall unlink
    npm ERR! path 阿巴阿巴阿巴\my-project\node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.nod
    e
    npm ERR! errno -4048
    npm ERR! Error: EPERM: operation not permitted, unlink '阿巴阿巴阿巴\my-project\node_modules\.node-s
    ass.DELETE\vendor\win32-x64-72\binding.node'
    npm ERR!  [OperationalError: EPERM: operation not permitted, unlink '阿巴阿巴阿巴\my-project\node_mo
    dules\.node-sass.DELETE\vendor\win32-x64-72\binding.node'] { 
    npm ERR!   cause: [Error: EPERM: operation not permitted, unlink '阿巴阿巴阿巴\my-project\node_modul
    es\.node-sass.DELETE\vendor\win32-x64-72\binding.node'] { 
    npm ERR!     errno: -4048,
    npm ERR!     code: 'EPERM',
    npm ERR!     syscall: 'unlink',
    npm ERR!     path: '阿巴阿巴阿巴\\my-project\\node_modules\\.node-sass.DELETE\\vendor\\win32-x64-7
    2\\binding.node'
    npm ERR!   },
    npm ERR!   errno: -4048,
    npm ERR!   code: 'EPERM',
    npm ERR!   syscall: 'unlink',
    npm ERR!   path: '阿巴阿巴阿巴\\my-project\\node_modules\\.node-sass.DELETE\\vendor\\win32-x64-72\ \binding.node',
    npm ERR!   parent: 'my-project'
    npm ERR! }
    npm ERR!
    npm ERR! The operation was rejected by your operating system.
    npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
    npm ERR! or that you lack permissions to access it.
    npm ERR!
    npm ERR! If you believe this might be a permissions issue, please double-check the
    npm ERR! permissions of the file and its containing directories, or try running
    npm ERR! the command again as root/Administrator.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     阿巴阿巴阿巴\AppData\Roaming\npm-cache\_logs\2021-04-06T10_14_34_164Z-debug.log

问题：  
我也不知道，继续按照这个流程走莫名其妙就不报错了。

1.  卸载再来一遍

npm uninstall node-sass
    npm cache clean --force
    cnpm install node-sass@latest

下载安装没问题，但运行还是有问题，什么问题我忘了，继续。。。

1.  卸载再来

npm uninstall node-sass
    npm install node-sass@4.14.1 -D

诶嘿！终于换了个报错！

gyp ERR! configure error
    gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
    gyp ERR! stack     at PythonFinder.failNoPython (阿巴阿巴阿巴\my-project\node_modules\node-gyp\lib\c
    onfigure.js:484:19)
    gyp ERR! stack     at PythonFinder.<anonymous> (阿巴阿巴阿巴\my-project\node_modules\node-gyp\lib\co
    nfigure.js:509:16)
    gyp ERR! stack     at callback (阿巴阿巴阿巴\my-project\node_modules\graceful-fs\polyfills.js:299:20
    )
    gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:167:21)
    gyp ERR! System Windows_NT 10.0.18363
    gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "阿巴阿巴阿巴\\my-project\\node_modules\\no
    de-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_lib
    rary="
    gyp ERR! cwd 阿巴阿巴阿巴\my-project\node_modules\node-sass
    gyp ERR! node -v v12.16.3
    gyp ERR! node-gyp -v v3.8.0
    gyp ERR! not ok
    Build failed with error code: 1
    npm WARN @dcloudio/uni-automator@2.0.0-30720210122002 requires a peer of adbkit@^2.11.1 but none is installed. You must
    install peer dependencies yourself.
    npm WARN @dcloudio/uni-automator@2.0.0-30720210122002 requires a peer of jimp@^0.10.1 but none is installed. You must in
    stall peer dependencies yourself.
    npm WARN @dcloudio/uni-automator@2.0.0-30720210122002 requires a peer of node-simctl@^6.1.0 but none is installed. You m
    ust install peer dependencies yourself.
    npm WARN @dcloudio/uni-automator@2.0.0-30720210122002 requires a peer of puppeteer@^3.0.1 but none is installed. You mus
    t install peer dependencies yourself.
    
    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!     阿巴阿巴阿巴\AppData\Roaming\npm-cache\_logs\2021-04-06T14_29_29_254Z-debug.log

好的，这个错我认得了，缺少python环境

1.  安装python环境

npm install --python=python2.7
    npm config set python D:/python/python.exe

npm config set python 你自己想装到哪的路径。

1.  再次安装node-sass TAT

npm install node-sass@4.14.1 -D

至此，成功！！！终于可以用了QAQ！

tips:  
uni-app引用sass外部sass文件

@import '@common/common.scss';

> 参考文档  
> [vue在uni-app中使用sass - 八本那年][vue_uni-app_sass -]  
> [Node Sass version 5.0.0 is incompatible with^4.0.0\_dong.wang的博客-CSDN博客][Node Sass version 5.0.0 is incompatible with_4.0.0_dong.wang_-CSDN]  
> [Vue – vue项目，执行npm install，出现错误：Can’t find Python executable “python”, you can set the PYTHON env…\_Emily的博客-CSDN博客][Vue _ vue_npm install_Can_t find Python executable _python_ you can set the PYTHON env_Emily_-CSDN]

[vue_uni-app_sass -]: https://www.barben.cn/code/822.html
[Node Sass version 5.0.0 is incompatible with_4.0.0_dong.wang_-CSDN]: https://blog.csdn.net/wangdong9395/article/details/109457992
[Vue _ vue_npm install_Can_t find Python executable _python_ you can set the PYTHON env_Emily_-CSDN]: https://blog.csdn.net/qq_41638795/article/details/93075651