Vue.js - Less file import is throwing a 'module build failed' error with can't resolve '../assets/file.less'

Question

I'm trying to create an web application using Vue.js. My project is built using Vue-Cli 3 and has the following structure:

-src
  -assets
  -components
    - first
       - Base.vue (*)
  - refer
    - less
       - user
          - register.less (*)
  - store
  - views

What I'm trying to do is to import register.less file on to Base.vue file.

Below is the code used in Base.vue file...

<style lang="less>
@import "../report/report.less";
</style>

If I try to run a server using npm run serve, the following error is thrown:

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&type=style&index=0&lang=less& (line 95, column 0)

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...

Please have a take a look... Thanks.

Answer 1

You are guessing right. The path must be relative. In your case you must go up one level still (via ..). Use:

<style lang="less>
@import "../../refer/less/user/register.less";
</style>