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>
なんでや。
追記 (2020/10/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>
~
これはなんだ・・・