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

【问题标题】：Using stylus @import in vue js components在 vue js 组件中使用手写笔 @import
【发布时间】：2017-01-30 22:19:55
【问题描述】：

我想知道是否可以在 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

【问题讨论】：

@import 行中缺少引号
确实@Potray，谢谢你，我得到了它指定完整路径和扩展名的工作。你知道我是否可以管理 ta have 而不是 "./assets/funcs.styl" , "assets/funcs"，因为解析路径会更简单？我在解析部分的 webpack 配置中确实有一个资产别名和一个 .styl 扩展名，但它似乎不起作用？
您可以导入正则表达式，如下所示：{AT}import "./assets/funcs/*" 或：{AT}import "./assets/*" ({AT} = @ ，它不会让我写它，因为这是我认为的评论）如果这解决了您的问题，请告诉我，以便我可以发布答案，您可以关闭此问题。
工作正常，但没有解决我的路径问题。这个问题超出了我最初问题的范围，但如果你有答案，请随意说出来；-) 基本上我仍然必须给出一个相对路径，虽然不是那么重要，但如果我有很深的组件树，然后可能必须像这样“../../../../../assets/*.styl”进行导入。 .在 webpack 中通过解析我们可以指定别名，这对 js 工作得很好——不幸的是，不适用于脚本。如果我还有其他问题可能会更好-您可以明确回答以关闭该问题;-)
我认为没有办法避免路径问题。您需要导入一个文件夹中所有文件的文件，并且您需要指定要导入的文件或文件夹。

标签： javascript import vue.js stylus

【解决方案1】：

你应该使用 webpack stylus-loader。

npm i --save-dev stylus stylus-loader

然后在你的 vue 组件中使用

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

而不是常规标签。

希望这对你有用:)

【讨论】：

我想我的问题不清楚 ;-) 我正在使用 stylus-loader 并且我的手写笔代码在我的组件中工作。
我在这里要实现的目标是从我的组件中的其他文件加载外部手写笔资源（例如函数、mixins 和诸如此类的东西），以便我在组件中使用它们。
基本上我希望能够在组件中使用手写笔的@import 功能。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

就像@Potray 指出的那样，我犯了一个简单的错误，在一行中缺少引号它是固定的;-)

【讨论】：