如何在 nuxt.js 中为 Stylus 定义默认导入答案

【问题标题】：How can I define default imports for Stylus in nuxt.js如何在 nuxt.js 中为 Stylus 定义默认导入
【发布时间】：2017-06-05 08:53:11
【问题描述】：

我将各种帮助程序（mixins、vars、函数）自动导入到我的组件中，以确保我和我的团队始终可以使用它们。

目前我使用 vue-cli webpack 模板并导入这些帮助程序，我在 webpack.base.js 配置中设置了 stylus 导入选项，如下所示；

stylus: { import: ['~stylus/common.styl'] }

我无法弄清楚如何使用 nuxt.js 执行此操作，我为此提出了 issue 并被告知使用构建扩展方法。

这不起作用，因为我收到了来自 webpack 本身的错误；

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

那么随着 webpack v2.2.0 带来的变化，我如何应用我的手写笔选项？

【问题讨论】：

标签： webpack vue.js stylus webpack-2

【解决方案1】：

Webpack 2 稍微改变了语法。在顶级 Webpack 配置中没有 stylus 键，而是在 stylus-loader 配置下有一个 options 键。所以你应该使用类似的东西：

...
{
  loader: 'stylus-loader',
  options: {
    import: ['~stylus/common.styl']
  }
}
...

Here's a solution 用于不同加载程序的相同问题。

【讨论】：

问题是我无法使用 nuxt.js 直接访问 webpack 配置，它们提供了扩展 webpack 配置的入口点。看起来我想将一个新的 webpack.LoaderOptionsPlugin 推送到配置的插件部分......手指交叉
抱歉，我错误地认为您可以直接访问，因为您编写了我在 webpack.base.js 中设置了手写笔导入选项。但是，是的，正如您所发现的，LoaderOptionsPlugin 是做同样事情的另一种方式。
遗憾的是仍然无法正常工作，看起来它可能在 stylus-loader 端，但我不太确定。 nuxt.js 的家伙已经推卸了责任，所以我将不得不等待，看看会发生什么。