webpack模板在Vue 2工程中如何应用Stylus插件

Question

我有一个带有Vue2的Webpack模板项目，我使用手写笔作为CSS预处理器(手写笔、手写笔加载器已经安装并工作)。

我找不到像破裂这样的为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导入它，但是到目前为止没有什么效果。

提前感谢！

Answer 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')
  ]
}),

Note__：如果import选项中提供的任何路径不正确，服务器就会陷入某种挂起状态，并且不会启动--不会引发错误。