使用vue loader和webpack2加载手写笔库和全局工作表

我正在尝试迁移一个我开始使用的项目

在此过程中，我必须从网页1更新到网页2。除以下各项外，一切正常：

我正在使用带有一些库（breake和Jeet）的手写笔和一个样式表，在其中我存储了一些变量，这些变量应该是全局可用的，并且可以存储到任何vue文件中。我看到了另一个主题，其中手写笔工作表是在所有需要它的vue文件中手动导入的。但对于这一点，我更愿意按照bourgeon模板自动在全球范围内提供

---

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

…

在Quasar的网页2中，文件如下

---

css utils.js

基本上，它以以下形式输出vue加载器或常规样式加载器的加载器配置（注意，我删除了对SASS的引用，因为它在这里不相关）：

---

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

---

webpackv1配置我希望移植到v2

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

---

我的Webpack v2问题

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

我无法找到一种方法将这段代码（从webpack 1语法）添加到css-utils.js或webpack.config.base.js中，以使vue文件和styl/stylus文件吉特和天文馆和index.styl表都可用

我查阅了和的文档，但我无法使它工作

在webpack.config.base.js中添加以下代码不起作用，我不知道该怎么做。节点向我输出一条消息错误，该错误清楚地表明既没有导入

Jeet/break

，也没有导入

index.styl

，因为它无法从break中重新识别我在index.styl中定义的一些变量，或者类似上面的

+语法（“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')
         ]
       }
      }
     }
   })
  ]
}

---

---

任何帮助都将不胜感激，谢谢：）

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

---

你有没有尝试过没有默认设置？意思是{手写笔：{使用…}}。嗨，为迟来的回答道歉，我不得不把这个放在一边几天。它确实有效，尽管我很确定我以前试过，但在webpack配置中经过一些清理（实际上是从零开始的），它现在可以工作了。非常感谢。有没有办法在angular cli中为angular 4配置jeet和Break？你知道为什么我得到的路径必须是一个字符串错误吗？