title: Vue.js - Less file import is throwing a 'module build failed' error with can't resolve '../assets/file.less'
body: <p>I'm trying to create an web application using Vue.js.
  My project is built using Vue-Cli 3 and has the following structure:</p>
  
  <pre><code>-src
    -assets
    -components
      - first
         - Base.vue (*)
    - refer
      - less
         - user
            - register.less (*)
    - store
    - views
  </code></pre>
  
  <p>What I'm trying to do is to import <code>register.less</code> file on to <code>Base.vue</code> file. </p>
  
  <p>Below is the code used in <code>Base.vue</code> file...</p>
  
  <pre><code>&lt;style lang="less&gt;
  @import "../report/report.less";
  &lt;/style&gt;
  </code></pre>
  
  <p>If I try to run a server using <code>npm run serve</code>,
  the following error is thrown:</p>
  
  <pre><code>Module build failed (from ./node_modules/less-loader/dist/cjs.js):
  
  @import "../report/report.less";
  ^
  Can't resolve '../report/report.less' in 'C:\Users\user\my_project\src\components\first'
        in C:\Users\user\my_project\src\components\first\Base.vue?vue&amp;type=style&amp;index=0&amp;lang=less&amp; (line 95, column 0)
  </code></pre>
  
  <p>I'm guessing this error is saying that I'm using the wrong path for importing the less file. 
  But I can't figure out how to fix it...</p>
  
  <p>Please have a take a look... Thanks.</p>