用vue-loader和webpack2加载Stylus库和全局表

Question

我正在尝试将我开始使用萌芽模板的项目迁移到类星体骨架。

在此过程中，我必须从Webpack 1更新到2。除了以下内容外，一切都很好：

我使用手写笔和一些librairies (断裂和Jeet)和一个样式表，其中我存储了一些变量，这些变量应该是全局可用的，并用于任何vue文件。我看到了另一个主题，在需要它的所有vue文件中手动导入手写笔表。但是，对于这一点，我更喜欢按照萌芽模板自动提供全局可用。

注意到在下面的代码中，我通过...删除了non-necessary code

在webpack 2的类星体，文件如下。

css-utils.js

链接

基本上，它以以下形式输出vue-加载程序或常规样式加载器的加载程序配置(注意，我删除了对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

链接

所关注的代码部分是：

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 config i希望移植到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和断裂librairies和index.styl sheet都可用。

我查看了vue-装载机和针式装载机的文档，但是我无法让它工作。

在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

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

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