Question

编辑：

在运行命令之前，我已经设法通过进入项目的根目录来使JavaScript部分vue-cli-service build --target lib遵守@路径。 SASS编译仍然无法正常工作。

我正在将一堆vue组件构建到打算在旧版应用程序中使用的库中。为此，我将库中所需的组件插入了它们自己的buildList.js中，并将全局应用程序样式插入了styles.scss中。我还编写了一个脚本build.sh，用于将生成的文件复制到旧版应用程序的目录中。该脚本通过package.json参考yarn buildLib

调用

问题在于，使用yarn buildLib构建项目时，vue-cli-service build不能解析导入路径中的@，并且无法找到我的文件。如果我使用相对路径指向集合（buildList.js，styles.scss），则其导入中的导入将失败。

默认的vue-cli Webpack脚本yarn serve和yarn build正确解释了@。

我不会以任何方式更改默认的Webpack配置，因此我希望@在任何使用情况下都可以解析为src/目录。

为什么这不起作用？

构建输出：

ERROR  Failed to compile with 21 errors                                                                                                                                                                                                                                                                     10:08:17

These dependencies were not found:

* @/components/controls/ColorPicker in ./collections/buildList.js
* @/components/controls/DateTimeInput in ./collections/buildList.js
* @/components/controls/FilterInput in ./collections/buildList.js
* etc

Error: Can't find stylesheet to import.
  @import '~@/assets/styles/reset';
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  collections/styles.scss 7:11  root stylesheet

build.sh

 #!/usr/bin/env bash

# Consistent working dir please
cd "${0%/*}"

legacyPath="${HOME}/Documents/etc"

vue-cli-service build --target lib --name app 'collections/buildList.js'
sass collections/styles.scss dist/app-styles.css

cp dist/app.umd.js ${legacyPath}/app.js
cp dist/app-styles.css ${legacyPath}/app-styles.css

buildList.js

import Vue           from 'vue';
import ColorPicker   from '@/components/controls/ColorPicker';
import DateTimeInput from '@/components/controls/DateTimeInput';
import FilterInput   from '@/components/controls/FilterInput';
[...]

styles.scss

  @import '~@/assets/styles/reset';
  @import '~@/assets/styles/general';
  [...]

Answer 1

事实证明，这就是我全部。〜@和@快捷方式由webpack提供，并由vue-cli-service包装。因此，要构建sass和js，我们需要从项目根目录调用它：

vue-cli-service build --target lib --name app 'src/buildList.js' 'src/styles.scss'

vue-cli-service build --target lib不尊重@路径

1 个答案: