Vue.js

Question

我正在尝试使用 Vue.js 创建 Web 应用程序。我的项目是使用 Vue-Cli 3 构建的，具有以下结构：

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

我想做的是将 register.less 文件导入到 Base.vue 文件。

下面是 Base.vue 文件中使用的代码...

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

如果我尝试运行使用 npm run serve 的服务器，抛出以下错误：

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)

我猜这个错误是说我使用了错误的路径来导入 less 文件。但我不知道如何解决它...

请看一下...谢谢。

Answer 1

你猜对了。路径必须是相对的。在您的情况下，您仍然必须上升一个级别（通过 ..）。使用：

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

Vue.js - 更少的文件导入引发 'module build failed' 错误，无法解析 '../assets/file.less'

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

less

webpack

vue-loader

vue-cli-3