title: Vue bind style dynamic backgroundImage with parameter using asset
body: <p>I'm trying to bind background images dynamically but there seems to be trouble compiling the assets. What's weird is that it works but no at the same time.
  <a href="https://i.stack.imgur.com/tMYL3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tMYL3.png" alt="vue_dynamic_image_err_compile" /></a></p>
  <p>I've tried various solutions from SO and nothing get rids of the compilation error (which still compile based on the image above):</p>
  <ul>
  <li><a href="https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working">Vue.js dynamic images not working</a></li>
  <li><a href="https://stackoverflow.com/questions/40666716/vuejs-v-bindstyle-for-background-image-url">VueJS v-bind:style for background-image: url()</a></li>
  <li><a href="https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working">Vue.js data-bind style backgroundImage not working</a></li>
  <li><a href="https://stackoverflow.com/questions/51643887/reference-assets-with-generated-style-data-bind">reference assets with generated style data bind</a></li>
  <li><a href="https://stackoverflow.com/questions/60859602/vue-dynamic-background-image-inline-component">Vue dynamic background image inline component</a></li>
  </ul>
  <h1>How The Project is Set Up</h1>
  <p>Laravel Sanctum as the backend, Vue SPA for the frontend and utilising Axios for communications.</p>
  <h1>Topic.vue Component</h1>
  <pre><code>&lt;div
      v-for=&quot;topic in topics&quot;
      :key=&quot;topic.id&quot;
      class=&quot;col-12 col-sm-6 col-lg-3 mb-4 d-flex justify-content-center&quot;
  &gt;
      &lt;div
          class=&quot;card-topic d-flex align-items-end&quot;
          :style=&quot;inlineBgImage(topic.src)&quot;
      &gt;
          &lt;div class=&quot;card-topic__button py-3 text-center w-100&quot;&gt;
              &lt;a href class=&quot;card-topic__link&quot;&gt;{{ topic.title }}&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h1>Script in Topic.vue</h1>
  <pre><code>&lt;script&gt;
  import { mapState } from 'vuex'
  
  export default {
      computed: {
          ...mapState('topic', ['topics']),
      },
      created() {
          this.$store.dispatch('topic/fetchTopics')
      },
      methods: {
          inlineBgImage(src) {
              let bgImage = require('@/assets' + src)
  
              return {
                  backgroundImage: `url(&quot;${bgImage}&quot;)`,
              }
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>In the <code>inlineBgImage(src)</code> methods, the background-image is successfully applied if the require is hardcoded i.e. <code>let bgImage = require('@/assets/img/topic/myself.jpg')</code>. Once I used the <code>src</code> value, it broked but still works(Failed to compile. page appear)</p>
  <h1>Assets</h1>
  <p>Below is the asset folder structure</p>
  <p><a href="https://i.stack.imgur.com/JP5Q2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JP5Q2.png" alt="enter image description here" /></a></p>
  <p>All SCSS files are imported to <code>app.scss</code> which are then imported to <code>main.js</code></p>
  <h2>_variables.scss</h2>
  <p><a href="https://i.stack.imgur.com/opYCC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/opYCC.png" alt="enter image description here" /></a></p>
  <p>The &quot;undefined variable&quot; <em>does</em> exist</p>
  <h2>app.scss</h2>
  <p>This is how I import the <code>_variable.scss</code> file in <code>app.scss</code>; <code>@import 'variables.scss';</code>. The import comes first before other files.
  <a href="https://i.stack.imgur.com/L4m9F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L4m9F.png" alt="enter image description here" /></a></p>
  <p>I've also tried:</p>
  <ul>
  <li><code>@import 'variables';</code></li>
  <li><code>@import '_variables';</code></li>
  <li><code>@import '_variables.scss';</code></li>
  </ul>
  <p>It still gives out errors.</p>
  <h1>Error Details in Terminal</h1>
  <p>I want to reiterate that these errors does not appear if I hardcode the <code>bgImage</code> e.g. <code>require('@/assets/img/topic/myself.jpg')</code>. I don't understand how these changes affect the compiler.</p>
  <pre><code>ERROR  Failed to compile with 6 errors                                                                                                  12:37:58 PM
   error  in ./src/assets/scss/card.scss
  
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Undefined variable.
     ╷
  16 │     background-color: $dark-blue;
     │                       ^^^^^^^^^^
     ╵
    src\assets\scss\card.scss 16:23  root stylesheet
  
   @ ./src/assets/scss/card.scss 4:14-233 14:3-18:5 15:22-241
   @ ./src sync ^\.\/assets.*$
   @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
   error  in ./src/assets/scss/search.scss
  
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Undefined variable.
     ╷
  27 │     color: $blue;
     │            ^^^^^
     ╵
    src\assets\scss\search.scss 27:12  root stylesheet
  
   @ ./src/assets/scss/search.scss 4:14-235 14:3-18:5 15:22-243
   @ ./src sync ^\.\/assets.*$
   @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
   error  in ./src/assets/scss/image.scss
  
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Undefined variable.
     ╷
  33 │     color: $white;
     │            ^^^^^^
     ╵
    src\assets\scss\image.scss 33:12  root stylesheet
  
   @ ./src/assets/scss/image.scss 4:14-234 14:3-18:5 15:22-242
   @ ./src sync ^\.\/assets.*$
   @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
   error  in ./src/assets/scss/button.scss
  
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Undefined variable.
    ╷
  2 │     color: $light-blue;
    │            ^^^^^^^^^^^
    ╵
    src\assets\scss\button.scss 2:12  root stylesheet
  
   @ ./src/assets/scss/button.scss 4:14-235 14:3-18:5 15:22-243
   @ ./src sync ^\.\/assets.*$
   @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
   error  in ./src/assets/scss/header.scss
  
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Undefined variable.
    ╷
  4 │     background-color: $dark-blue;
    │                       ^^^^^^^^^^
    ╵
    src\assets\scss\header.scss 4:23  root stylesheet
  
   @ ./src/assets/scss/header.scss 4:14-235 14:3-18:5 15:22-243
   @ ./src sync ^\.\/assets.*$
   @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  
   error  in ./src/assets/scss/nav.scss
  
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Undefined variable.
    ╷
  6 │     color: $light-blue;
    │            ^^^^^^^^^^^
    ╵
    src\assets\scss\nav.scss 6:12  root stylesheet
  
   @ ./src/assets/scss/nav.scss 4:14-232 14:3-18:5 15:22-240
   @ ./src sync ^\.\/assets.*$
   @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue?vue&amp;type=script&amp;lang=js&amp;
   @ ./src/views/Topic.vue
   @ ./src/router/index.js
   @ ./src/main.js
   @ multi (webpack)-dev-server/client?http://192.168.100.14:8080&amp;sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
  </code></pre>
  <h1>Other Details</h1>
  <p>The <code>topic.src</code> from <code>v-for=&quot;topic in topics&quot;</code> will yield a String, for e.g. <code>/img/topic/myself.jpg</code>.</p>