通过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

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

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

解决方法：

  卸装当前版本

npm uninstall sass-loader

  安装8.0.0的版本

npm i [email protected] -D

  编译后发现还是有个报错

  根据提示，运行“npm rebuild node-sass”，还是行不通，经过一番探索，发现问题的根源是不同nodejs版本造成的。HBuilderX自带的是v8.10.0，而我本地是v12.16.1。既然这样就好办了，通过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 [email protected] -D    // 安装sass8.8.0版本