Error: PostCSS received undefined instead of CSS string

問題描述

報錯內容如下：

yarn run v1.22.10
$ vue-cli-service electron:serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                3:37:19 ├F10: PM┤
 error  in ./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true&

Syntax Error: Error: PostCSS received undefined instead of CSS string


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true& 4:14-440 14:3-18:5 15:22-448
 @ ./src/App.vue?vue&type=style&index=1&id=7ba5bd90&lang=scss&scoped=true&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.3.4:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

問題原因

node-sass 和 sass-loader 版本與當前的不兼容，安裝對應版本的包即可。

解決方案

// 卸載node-sass 和 sass-loader
yarn remove node-sass
yarn remove sass-loader

// 安裝對應版本的包
yarn add node-sass@4.14.1 --dev
yarn add sass-loader@8.0.0 --dev 

參考資料

1. 解決：Error: PostCSS received undefined instead of CSS string