CODEWITHSUNDEEP
webpackvuejs2
ProudOne
ProudOne

Reputation: 357

vue-cli-service build --target lib does not respect @ paths

Edit:

I've managed to get the javascript part vue-cli-service build --target lib to respect the @ paths by cd'ing into the project's root directory before running the command. The SASS compilation still does not work.

I'm building a bunch of vue components into a library I intend to use in a legacy app. To that end I've plugged the components I want in the library into their own buildList.js and global application styles into styles.scss. I also wrote a script build.sh that copies the resulting files to the legacy app's directory. This script is called through a package.json reference yarn buildLib

The problem is that when building the project using yarn buildLib, vue-cli-service build does not resolve the @ in import paths and fails to find my files. If I use relative paths to point at the collections (buildList.js, styles.scss) the imports within their imports will fail.

The default vue-cli webpack scripts yarn serve and yarn build interpret the @ correctly.

I am not altering the default webpack configuration in any way so I'm expecting @ to resolve to the src/ directory in any use case.

Why is this not working?

Build Output:

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';
  [...]

Upvotes: 1

Views: 1229

Answers (1)

ProudOne
ProudOne

Reputation: 357

As it turns out, this was all me. The ~@ and @ shortcuts are provided by webpack which is wrapped by vue-cli-service. Thus, to build both the sass and js we need to invoke it thusly from the project root:

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

Upvotes: 1

Related Questions