Question

我有一个带有Webpack template的Vue2项目，我正在使用Stylus作为CSS预处理器（stylus，stylus-loader已经安装并正常工作）。

我找不到像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导入它，但到目前为止没有任何效果。

提前致谢！

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

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

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

1 个答案: