1.絶対パスで import する ... けどうまくいかん

Nuxt.js とかだとデフォルトで ~ でうまくいくんだけど、
Vue.js だと @ でうまく指定できずずっと悩んでた。
とりあえずシンプルに解決したのでメモ。

2.結論

@ の前に、~ をつける。

3.例えば ...

グローバルな .styl を import したい。

失敗例

hogehoge.vue

<style lang="stylus" scoped>
@import "@/assets/css/_mixins.styl"
</style>

TypeScript でプロジェクトを作成していると、プロジェクト直下の tsconfig.json に以下の文がある。

tsconfig.json

{
  "compilerOptions":
・・・中略
    "paths": {
      "@/*": [
        "src/*"
      ]
    },

なので、@ つければいけるかと思いきや、失敗。
なぜかは今はわからないけど、~ をさらにつけることで解決。

成功例

hogehoge.vue

<style lang="stylus" scoped>
- @import "@/assets/css/_mixins.styl"
+ @import "~@/assets/css/_mixins.styl"
</style>

なんでや。

11 16:21時点)

上記の ~@ という記述方法はどうやら、 Stylus で適用されるらしい。
script 内では結局 @ だけでいいみたい。

hogehoge.vue

・・・中略
<script lang="typescript">
import { defineComponent, computed } from "vue"
export default defineComponent({
  const data = reactive({
    style: computed(() => {
      return {
        backgroundImage: `url(${require(`@/assets/graphics/unit/unit1_1.png`)})`
      }
    })
  })
})
</script>

~ これはなんだ・・・