响应应用程序构建失败(sass/解析-url-加载程序)

Question

在本教程(https://www.youtube.com/watch?v=yqe5UB_BF7Q)上创建一个react应用程序，并在尝试应用样式时得到此错误。最后一步涉及删除index.css文件并将其替换为styles.scss。

我已经试过npm install -g sass没有运气了，有人知道怎么做吗？

错误输出在下面。

编译失败。

Cannot find module 'sass'
Require stack:
- /Users/amarcin/web/node_modules/sass-loader/dist/utils.js
- /Users/amarcin/web/node_modules/sass-loader/dist/index.js
- /Users/amarcin/web/node_modules/sass-loader/dist/cjs.js
- /Users/amarcin/web/node_modules/loader-runner/lib/loadLoader.js
- /Users/amarcin/web/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/amarcin/web/node_modules/webpack/lib/NormalModule.js
- /Users/amarcin/web/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/amarcin/web/node_modules/react-scripts/config/webpack.config.js
- /Users/amarcin/web/node_modules/react-scripts/scripts/start.js
WARNING in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles.scss)
Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- /Users/amarcin/web/node_modules/sass-loader/dist/utils.js
- /Users/amarcin/web/node_modules/sass-loader/dist/index.js
- /Users/amarcin/web/node_modules/sass-loader/dist/cjs.js
- /Users/amarcin/web/node_modules/loader-runner/lib/loadLoader.js
- /Users/amarcin/web/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/amarcin/web/node_modules/webpack/lib/NormalModule.js
- /Users/amarcin/web/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/amarcin/web/node_modules/react-scripts/config/webpack.config.js
- /Users/amarcin/web/node_modules/react-scripts/scripts/start.js

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles.scss)
Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
  PostCSS received undefined instead of CSS string
  at new Input (/Users/amarcin/web/node_modules/resolve-url-loader/node_modules/postcss/lib/input.js:38:13)
    at encodeError (/Users/amarcin/web/node_modules/resolve-url-loader/index.js:287:12)
    at onFailure (/Users/amarcin/web/node_modules/resolve-url-loader/index.js:228:14)

webpack compiled with 2 errors and 1 warning

Answer 1

很明显，所有需要运行的是运行npm install sass-loader sass webpack