在vue js组件中使用输入笔@import

Question

我想知道是否可以从vue文件的样式部分使用手写笔@import特性

假设我的assets文件夹中有一个包含此伪函数的funcs.styl文件

add(a)
  a + a

在我的App.vue中，我想使用这个函数

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

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

h1
 margin add(30px)

</style>

多亏了@Potray，才能正常工作

Seb

Answer 1

这只是一个答案，所以最初的问题可以结束。

您在@import行中缺少引号

Answer 2

你应该使用webpack手写笔加载器。

npm i --save-dev stylus stylus-loader

然后在您的vue组件中使用

<style lang="stylus"></style>

而不是常规的标签。

希望这对你有用:)

Answer 3

就像@Potray指出的那样，我犯了一个简单的错误，在一行中漏掉了一个引号，它已经修复了;-)