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时发生错误。具体步骤如下:
打开HBuilderX中的uni-app项目
打开项目中的package.json文件
找到项目的devDependencies中sass-loader的版本号,这个版本号应该是你在安装sass插件时自动安装的。
手动安装对应sass-loader版本号的node-sass,可以使用以下命令:
npm install node-sass@4.14.1
注意要把版本号替换成你找到的sass-loader版本号。
编辑项目中的vue.config.js或者webpack.config.js文件。如果没有这个文件,则需要创建一个。
在该文件中添加以下代码段:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/sass/variables.scss";`
}
}
}
}
其中,prependData的值代表要导入的Sass变量文件的路径。
保存文件,并重新启动项目。现在,你的sass文件应该可以成功编译了。
希望这些步骤能够解决你遇到的问题。