Как использовать фоновые изображения с scss + Parcel.js

Question

Я пытаюсь использовать parcel.js и scss для использования фонового изображения, но получаю Uncaught SyntaxError: Неожиданный токен <7d6454d814b6ce2e1592d3937c337ef3.js: 1 </em> Ошибка

Или иногда получаю: Не могу прочитать свойство 'js' с нулевым значением

Вот мой scss:

.hero{
  background-image: url('../../images/2ndpaper.jpg');
}

Вот мой js:

import "../styles/index.scss";
import paperbg from "../images/2ndpaper.jpg";

Здесьмой пакет.json:

 {
  "name": "development",
  "version": "1.0.0",
  "description": "CB PC - Web Development",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html --out-dir prod"
  },
  "keywords": [
    "client",
    "website"
  ],
  "author": "Designs by Harp",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "parcel-bundler": "^1.11.0"
  },
  "dependencies": {
    "bootstrap-4-grid": "^2.4.1",
    "gsap": "^2.0.2",
    "jshint": "^2.10.1",
    "sass": "^1.17.2"
  }
}

Что может быть не так?Спасибо.

Answer 1

Я столкнулся с этой проблемой, используя React + Parcel + SCSS.Поскольку контуры изображений не очень хорошо воспроизводятся в таблице стилей для чего-то вроде background-image, я решил просто поместить фоновое изображение как встроенный стиль в свой компонент, где я могу правильно импортировать изображение:

import React from "react";

import homeBG from "../assets/homeBG.jpg";

const Home = () => {

  return (
    <div>
      <div className="hero-image" style={{ backgroundImage: `url( ${homeBG})` }}>
        <img src={homeBG} alt="Home" />
      </div>
      <div className="intro">
          <h2>Welcome Home</h2>
      </div>
    </div>
  );
};

export default Home;