Mac下通过vue-cli创建的uni-app项目中使用sass

一、创建项目

uni-app官网上提供了 HBuilderX可视化界面、vue-cli命令行 两种方式创建项目。

二、安装sass

    通过可视化界面创建的：

        在HBuilderX - 工具 - 插件安装 - 找到scss/sass编译插件栏目，进行安装。

    通过vue-cli命令行创建的：

        uni-app官网上已经明确说明了“cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目”。

OK，那我们开始通过npm安装！

sass-loader依赖于node-sass，所以需要安装node-sass

npm i node-sass sass-loader -D

  安装成功后重新编译，发现报错：

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

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

 - options has an unknown property 'prependData'. These properties are valid:

   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

  这是因为当前sass版本太高，只需要切换成低版本就可以了。

解决方法：

  卸装当前版本

// 卸装当前版本
npm uninstall sass-loader

// 安装8.0.0的版本
npm i sass-loader@8.0.0 -D

  编译后发现还是有个报错：

Node Sass could not find a binding for your current enviironment: OS X 64-bit with Node.js 8.x
Found bindiings for the following enviironments:
    - OS X 64-bit wiith Node.js 12.x
This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.

  根据提示，运行“npm rebuild node-sass”，还是行不通，经过一番探索，发现问题的根源是不同nodejs版本造成的。HBuilderX自带的是v8.10.0，而我本地是v12.16.1。既然这样就好办了，先卸载sass-loader, 再通过nvm将本地nodejs版本号切换为v8.x，重新安装sass-loader就OK了。

  具体操作：

nvm ls                        // 查看本地安装的nodejs所有版本
nvm install 8.8.1             // 安装nodejs8.8.1版本
nvm current                   // 查看当前所在版本
nvm use 8.8.1                 // 使用8.8.1版本
npm uninstall sass-loader     //卸装sass
npm i sass-loader@8.8.0 -D    // 安装sass8.8.0版本

如果以上方法都无法解决，那就修改HBuilderX自带Node的版本：

cd /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node 

mv node node-v8

// 创建软链接
ln -s /usr/local/bin/node /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node/node
// 如果安装了nvm，请使用
ln -s /Users/[用户名]/.nvm/versions/node/[node版本号]/bin/node /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node/node