sass - Electron production build css url() paths broken

Question

I have an issue with an Electron project I'm working on. I am using React and Sass, the problem happens when I try to use an image from public inside a background:url(), it doesn't work on production, it tries to take the image from the root system folder instead of public.

This is my package.json:

{
  "name": "reactron",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.3.6",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "concurrently": "^5.1.0",
    "cross-env": "^7.0.2",
    "electron-is-dev": "^1.1.0",
    "electron-react-devtools": "^0.5.3",
    "gsap": "^3.4.0",
    "howler": "^2.1.3",
    "node-sass": "^4.13.1",
    "react": "^16.13.0",
    "react-contextmenu": "^2.14.0",
    "react-dom": "^16.13.0",
    "react-indiana-drag-scroll": "^1.8.0",
    "react-redux": "^7.2.0",
    "react-scripts": "^3.4.3",
    "redux": "^4.0.5",
    "wait-on": "^4.0.1"
  },
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-build": "electron-builder",
    "build-electron": "mkdir build/src && robocopy electron build/electron /S & robocopy src/shared build/src/shared /S",
    "release": "npm run react-build && electron-builder --publish=always",
    "build": "npm run react-build && npm run electron-build",
    "start": "concurrently "cross-env BROWSER=none npm run react-start" "wait-on http://localhost:3000 && electron .""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^8.1.1",
    "electron-builder": "^22.4.1",
    "electron-packager": "^14.2.1"
  },
  "build": {
    "extraResources": [
      "public"
    ]
  }
}

While developing everything works fine, the images are loaded from the public folder. This is the error that I got when running npm run build:

./src/assets/styles/sass/main.scss
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option) 

I found a solution to that, going to node_modules/resolve-url-loader and modifying index.js, under var options = Object.assign on line 46: changed removeCR to true.

Now my project builds correctly, but this is how images on css's url() are being loaded: CSS error on path loading image

I have honestly no idea how to fix this issue right now.

question from:https://stackoverflow.com/questions/66064865/electron-production-build-css-url-paths-broken

Answer 1

Waitting for answers