windows环境下HbuilderX安装sass插件后无法编译sass文件，模块加载错误

Question

uni-app开发，使用sass后直接报错，node安装环境后无法运行，换成hbuilderX还是报错，HbuilderX插件已安装

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
19:20:36.862 ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
19:20:36.875 SassError: Invalid argument(s): Unsupported output style "nested".
19:20:36.876     at runLoaders (C:\Users\WI\Downloads\HBuilderX\plugins\uniapp-cli\node_modules\webpack\lib\NormalModule.js:301:20)
19:20:36.890     at C:\Users\WI\Downloads\HBuilderX\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:367:11
19:20:36.890     at C:\Users\WI\Downloads\HBuilderX\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:233:18
19:20:36.900     at context.callback (C:\Users\WI\Downloads\HBuilderX\plugins\uniapp-cli\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
19:20:36.900     at render (C:\Users\WI\Downloads\HBuilderX\plugins\uniapp-cli\node_modules\sass-loader\dist\index.js:73:7)
19:20:36.914     at Function.call$2 (C:\Users\WI\node_modules\sass\sass.dart.js:54311:16)
19:20:36.915     at _render_closure1.call$2 (C:\Users\WI\node_modules\sass\sass.dart.js:33511:12)
19:20:36.933     at _RootZone.runBinary$3$3 (C:\Users\WI\node_modules\sass\sass.dart.js:19817:18)
19:20:36.934     at _RootZone.runBinary$3 (C:\Users\WI\node_modules\sass\sass.dart.js:19821:19)
19:20:36.955     at _FutureListener.handleError$1 (C:\Users\WI\node_modules\sass\sass.dart.js:18286:19)
19:20:36.956     at _Future__propagateToListeners_handleError.call$0 (C:\Users\WI\node_modules\sass\sass.dart.js:18574:40)
19:20:36.970     at Object._Future__propagateToListeners (C:\Users\WI\node_modules\sass\sass.dart.js:3484:88)
19:20:36.971     at _Future._completeError$2 (C:\Users\WI\node_modules\sass\sass.dart.js:18410:9)
19:20:36.990     at _Future__asyncCompleteError_closure.call$0 (C:\Users\WI\node_modules\sass\sass.dart.js:18500:18)
19:20:36.990     at Object._microtaskLoop (C:\Users\WI\node_modules\sass\sass.dart.js:3534:21)
19:20:37.009     at StaticClosure._startMicrotaskLoop (C:\Users\WI\node_modules\sass\sass.dart.js:3540:11)
19:20:37.010  ERROR  Build failed with errors.

Answer 1

参考GPT和自己的思路：

这个问题的原因在于你使用的Sass输出风格“nested”不受支持，你需要将其更改为一个受支持的输出风格，例如“expanded”或“compressed”，才能避免调用Sass时发生错误。具体步骤如下：

1. 打开HBuilderX中的uni-app项目

2. 打开项目中的package.json文件

3. 找到项目的devDependencies中sass-loader的版本号，这个版本号应该是你在安装sass插件时自动安装的。

4. 手动安装对应sass-loader版本号的node-sass，可以使用以下命令：

   npm install node-sass@4.14.1
   

   注意要把版本号替换成你找到的sass-loader版本号。

5. 编辑项目中的vue.config.js或者webpack.config.js文件。如果没有这个文件，则需要创建一个。

6. 在该文件中添加以下代码段：

   module.exports = { 
       css: {
           loaderOptions: {
               sass: {
                   prependData: `@import "@/sass/variables.scss";`
               }
           }
       }
   }
   

   其中，prependData的值代表要导入的Sass变量文件的路径。

7. 保存文件，并重新启动项目。现在，你的sass文件应该可以成功编译了。

希望这些步骤能够解决你遇到的问题。