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.

why are you importing report/report when in your file structure doesn't have report... register.less you are trying to import that but why import report.less — Ninth Autumn
– Ninth Autumn, Commented May 8, 2019 at 6:42
The error is saying report/report.less but you posted less/user/register.less. Which is it? — Gino Mempin
– Gino Mempin, Commented May 8, 2019 at 6:43
How about @import "../../refer/less/user/register.less"; ? — acdcjunior
– acdcjunior, Commented May 8, 2019 at 6:56
oh... @import "../../refer/less/user/register.less"; this indeed worked out well.... — Steven Yoo
– Steven Yoo, Commented May 8, 2019 at 7:37

acdcjunior · Accepted Answer · 2019-05-08 09:41:53Z

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>

answered May 8, 2019 at 9:41

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related