新的 create-react-app 编译失败 sass

Question

我的 React 项目有问题，因此我刚刚制作了一个新的 React 应用程序并更新了我 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

问题就像

背景 url 就像

'./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

新的 create-react-app 编译失败 sass

New create-react-app failing to compile sass

sass

reactjs

node-sass