解决：Error: PostCSS received undefined instead of CSS string

前言

vue项目运行报错：

---

错误如下

 ERROR  Failed to compile with 2 errors                                                                                                                                          下午5:11:51

 error  in ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&

Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\sass-loader\dist\utils.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\sass-loader\dist\index.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\sass-loader\dist\cjs.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\loader-runner\lib\loadLoader.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\loader-runner\lib\LoaderRunner.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\webpack\lib\NormalModule.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\webpack\lib\NormalModuleFactory.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\webpack\lib\Compiler.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\webpack\lib\webpack.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\@vue\cli-service\lib\commands\serve.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\@vue\cli-service\lib\Service.js
- D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\@vue\cli-service\bin\vue-cli-service.js

 @ ./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/components/NavHeader.vue?vue&type=style&index=0&lang=scss& 4:14-440 14:3-18:5 15:22-448
 @ ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&
 @ ./src/components/NavHeader.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./
src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.50.181:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS received undefined instead of CSS string
    at new Input (D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\postcss\lib\input.js:38:13)
    at parse (D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\postcss\lib\parse.js:13:15)
    at new LazyResult (D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\postcss\lib\lazy-result.js:64:16)
    at Processor.<anonymous> (D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\postcss\lib\processor.js:142:12)
    at Processor.process (D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\postcss\lib\processor.js:121:23)
    at D:\code\zcw-vue-shop\zcw-vue-shop\node_modules\postcss-loader\src\index.js:141:8
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

 @ ./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/components/NavHeader.vue?vue&type=style&index=0&lang=scss& 4:14-440 14:3-18:5 15:22-448
 @ ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&
 @ ./src/components/NavHeader.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./
src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue?vue&type=script&lang=js&
 @ ./src/pages/home.vue
 @ ./src/router.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.50.181:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

解决办法

找到原因了，原来在style标签上面添加一下属性报错：

<style lang="scss">

当运行后还是报错：

 error  in ./src/components/NavHeader.vue?vue&type=style&index=0&lang=scss&

（卸载当前版本）

npm uninstall sass-loader
npm install sass-loader@8.0.0. --save-dev

卸载这个版本

cnpm install node-sass --save-dev

然后再执行：

npm install

npm run serve

报错如下信息：

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

//卸载 node-sass
npm uninstall node-sass
//然后安装最新版本（5.0之前）
npm install node-sass@4.14.1

npm install 

npm run serve

成功了，O(∩_∩)O哈哈~

转载：https://blog.csdn.net/qq_32370913/article/details/111134060