0

我正在尝试将我开始使用bourgeon 模板的项目迁移到Quasar framework。

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

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

注意 在下面的代码中，我删除了non-necessary codeby...

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

css-utils.js

关联

基本上，它以以下形式输出 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

关联

感兴趣的代码部分是：

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 以使Jeet可用于vue文件和styl/stylus文件的方法和破裂库和index.styl 表。

我浏览了vue-loader和stylus-loader的文档，但我无法让它工作。

在 webpack.config.base.js 中添加以下代码不起作用，我不知道该怎么做。Node 向我输出一条消息错误，清楚地表明既没有Jeet/Rupture被导入，也index.styl没有重新调整我在 index.styl 中定义的一些变量或+above('tablet')来自 Rupture 的语法。

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

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

4

1 回答 1

0

正如@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')
        ]
      }
    }
  })
 ]
}
于 2017-02-23T13:23:19.910 回答