如何使用 webpack 模板在 Vue 2 项目中为 Stylus 应用插件答案

【问题标题】：How to apply plugin for Stylus in Vue 2 project with webpack template如何使用 webpack 模板在 Vue 2 项目中为 Stylus 应用插件
【发布时间】：2017-06-05 08:52:45
【问题描述】：

我有一个带有 Webpack template 的 Vue2 项目，我正在使用 Stylus 作为 CSS 预处理器（手写笔、手写笔加载器已经安装并正在工作）。

我找不到为 Stylus 应用插件的方法，例如 rupture。

我尝试为手写笔加载器修改build/utils.js 中的选项，如下所示：

stylus: generateLoaders('stylus', {use: [require('rupture')()]}),
styl: generateLoaders('stylus', {use: [require('rupture')()]})

还尝试将import从<style></style>标签中的App.vue中破除，例如：

@import 'rupture/rupture/index.styl' // also 'rupture/index.styl'

还尝试从main.js 导入它，但到目前为止没有任何效果。

提前致谢！

【问题讨论】：

@import '~rupture/rupture/index.styl' ?
超级，不知道~，这确实有效！
修改选项应该已经完成了这项工作。奇怪的是它不起作用。
嗯，会不会是因为 Node 8.0？没有足够的错误信息。只是 stylus-loader 失败。
不幸的是，@import 解决方案是本地的，仅适用于当前组件。所以它不适用于要求应该是全局的 mixin。

标签： javascript webpack vuejs2 stylus

【解决方案1】：

好吧，我想出了一个使用 Stylus 的 import 选项的解决方案，如下所示：

stylus: generateLoaders('stylus', {

  // unfortunately `use` option throws error
  // use: [require('nib')(), require('rupture')()]

  // import to the rescue
  import: [
    '~nib/index.styl',
    '~rupture/rupture/index.styl',
    path.resolve(__dirname, '../src/styles/cfg.styl')
  ]
}),

注意：如果 import 选项中提供的任何路径不正确，服务器会静默地进入挂起状态并且不会启动 - 不会引发错误。

【讨论】：