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

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.

参考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文件应该可以成功编译了。

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