在 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

你应该使用 webpack stylus-loader。

npm i --save-dev stylus stylus-loader

然后在你的 vue 组件中使用

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

而不是常规标签。

希望这对你有用:)

Answer 2

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

Answer 3

这只是一个答案，因此可以关闭初始问题。

您（曾经）在@import 行中缺少引号

在 vue js 组件中使用手写笔 @import

Using stylus @import in vue js components

javascript

import

stylus

vue.js