新的 create-react-app 无法编译 sass

Question

我的 React 项目遇到了问题，因此我刚刚制作了一个新的 reactapp 并更新了我的 package.json 中的所有包。 但是，无论是更新的 react 版本、react 依赖项还是 node-sass 都不允许编译项目。 它安装时没有任何漏洞，这很好，但 sass 编译器不想玩球。

文件夹结构如下

--src
  --api
  --assets
    --fonts
    --images
  --components
  --pages
  --scss
    --_variables.scss
    --_media.scss
    --_mavigation.scss
  --App.scss
  --App.js
  --index.js

每当我提到 css 中的背景图像时，似乎都会中断，尽管在旧版本的 reactjs 中使用相同的路径，但我似乎无法找到正确的工作路径。

我收到以下错误

Failed to compile.

    ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
    Module not found: Can't resolve './scss/assets/images/camera.png' in 'xxxproject/src'

这是错误的 css 如下；

background-image: url('./assets/images/camera.png');

有人有任何想法吗？

Answer 1

问题就像

背景网址就像

'./assets/images/camera.png'

节点 sass 字符串来解决它

'./scss/assets/images/camera.png'' ///scss causing problem 

解决方案：在背景图像中使用 ../

 background-image: url('../assets/images/camera.png'); // as per your folder structur