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

Question

我有一个 Vue2 项目 Webpack template and I am using Stylus 作为 CSS 预处理器（stylus，stylus-loader 已经安装并工作）。

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

我尝试修改 build/utils.js 中的选项，如下所示：

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

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

@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 应用插件

How to apply plugin for Stylus in Vue 2 project with webpack template

javascript

webpack

vuejs2

stylus