title: How to use background-images with SCSS + Parcel.js
body: <p>I'm trying to use <code>parcel.js</code> and SCSS to use a background-image, but getting:</p>
  
  <blockquote>
    <p><strong><em>Uncaught SyntaxError: Unexpected token &lt; 7d6454d814b6ce2e1592d3937c337ef3.js:1</em></strong></p>
  </blockquote>
  
  <p>Or at times getting: </p>
  
  <blockquote>
    <p>Cannot read property 'js' of null</p>
  </blockquote>
  
  <p>Here is my scss:</p>
  
  <pre><code>.hero{
    background-image: url('../../images/2ndpaper.jpg');
  }
  </code></pre>
  
  <p>Here is my js:</p>
  
  <pre><code>import "../styles/index.scss";
  import paperbg from "../images/2ndpaper.jpg";
  </code></pre>
  
  <p>Here is my package.json:</p>
  
  <pre><code> {
    "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"
    }
  }
  </code></pre>
  
  <p>What could be wrong?</p>