javascript - 如何使用Webpack模板在Vue 2项目中为Stylus应用插件

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

我找不到像rupture这样为Stylus应用插件的方法。

我试图修改手写笔加载器的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导入它，但到目前为止没有任何效果。

提前致谢！

最佳答案

好吧，我想出了一个使用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选项中提供的任何路径不正确，则服务器将以静默方式进入挂起状态并且无法启动-不会引发任何错误。