使用 vue-loader 和 webpack2 加载 Stylus 库和 Global sheet

Question

我正在尝试迁移我开始使用的项目 bourgeon template to Quasar framework。

在这个过程中，我不得不从 Webpack 1 更新到 2。除以下内容外，一切正常：

我正在使用带有一些库（Rupture 和 Jeet）的手写笔和一种样式sheet，我在其中存储了一些全局可用的变量以及任何 vue 文件.我看到另一个主题，其中手写笔 sheet 被手动导入到所有需要它的 vue 文件中。但是为此，我更愿意根据 bourgeon 模板在全球范围内自动可用。

备注在下面的代码中，我通过 ...

删除了 non-necessary code

在 Quasar 的 webpack 2 中，文件如下。

css-utils.js

Link

基本上，它输出 vue-loader 或常规样式加载器的加载器配置，格式如下（请注意，我删除了对 SASS 的引用，因为它与此处无关）：

{ 
  css: 'vue-style-loader!css-loader',
  styl: 'vue-style-loader!css-loader!stylus-loader,
  stylus: 'vue-style-loader!css-loader!stylus-loader
}

webpack.base.conf.js

Link

感兴趣的代码部分是：

module: {
  rules: [
    ...
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        postcss: cssUtils.postcss,
        loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({
          sourceMap: useCssSourceMap,
          extract: env.prod
        }))
      }
    }
    ...
  ]
}

Webpack v1 配置我希望移植到 v2

module.exports = {
  ...
  stylus: {
    use: [
      require('jeet')(),
      require('rupture')(),
    ],
    import: [
      path.resolve(__dirname, '../src/styles/index.styl')
    ]
  }
}

我的 Webpack v2 问题

我无法找到一种方法将这段代码（来自 webpack 1 语法）添加到 css-utils.js 或 webpack.config.base.js 以供两者使用vue 文件和 styl/stylus 文件 Jeet 和 Rupture 库 和 index.stylsheet.

我查看了两者的文档 vue-loader and stylus-loader，但我无法让它工作。

在 webpack.config.base.js 中添加以下代码不起作用，我不知道该怎么做。节点向我输出一条消息错误，清楚地指出既没有导入 Jeet/Rupture 也没有导入 index.styl，因为它无法重新调整我在 index.styl 中定义的某些变量或 +above('tablet') 之类的语法破裂.

module.exports = {
  ...
  rules: [
   ...      
  ],
  plugins: [
   ...
  new webpack.LoaderOptionsPlugin({
    minimize: env.prod,
    options: {
      context: path.resolve(__dirname, '../src'),
      ...
      stylus: {
       default: {
         use: [
          require('jeet')(),
          require('rupture')()
         ],
         import: [
           path.resolve(__dirname, '../src/styles/index.styl')
         ]
       }
      }
     }
   })
  ]
}

任何帮助将不胜感激，谢谢:)

Answer 1

正如@Razvan Stoenescu 所指出的，以下代码解决了我的问题。非常感谢。

module.exports = {
  ...
  rules: [
   ...      
  ],
  plugins: [
   ...
   new webpack.LoaderOptionsPlugin({
     minimize: env.prod,
    options: {
     context: path.resolve(__dirname, '../src'),
     ...
     stylus: {
        use: [
         require('jeet')(),
         require('rupture')()
        ],
        import: [
         path.resolve(__dirname, '../src/styles/index.styl')
        ]
      }
    }
  })
 ]
}

使用 vue-loader 和 webpack2 加载 Stylus 库和 Global sheet

Load Stylus library and Global sheet with vue-loader and webpack2

stylus

webpack

vue.js

vue-component

vue-loader