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

Posted 2023-02-23

【中文标题】使用 vue-loader 和 webpack2 加载 Stylus 库和全局工作表

【英文标题】：Load Stylus library and Global sheet with vue-loader and webpack2

【发布时间】：2017-07-05 09:19:56

【问题描述】：

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

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

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

---

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

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

---

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

---

我希望移植到 v2 的 Webpack v1 配置

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.styl 表。

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

在 webpack.config.base.js 中添加以下代码不起作用，我不知道该怎么做。 Node 向我输出一条消息错误，明确指出 Jeet/Rupture 和 index.styl 都没有被导入，因为它无法重新整理我在 index.styl 中定义的一些变量或来自 Rupture 的 +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')
         ]
       
      
     
   )
  ]

---

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

【问题讨论】：

你试过没有那个“默认”吗？意思是 stylus: use.... 。

嗨，很抱歉回答迟了，我不得不把这个搁置几天。它确实有效，虽然我很确定我之前尝试过，但是在 webpack 配置中进行了一些清理之后（实际上是从头开始），它现在可以工作了。非常感谢。

【参考方案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')
        ]
      
    
  )
 ]

【讨论】：

有没有办法在角 cli 中为角 4 配置 jeet 和破裂？

你知道为什么我得到 Path must be a string error with that code sn-p？