如何使 vue-loader 使用不同的加载器多次处理同一个块

Question

更新

可以在我创建的 Nuxt feature request 中找到其他详细信息。

原始问题：

我正在使用 Nuxt 构建模式库应用程序。我的目标是在每个渲染组件旁边显示未编译的 SASS，如下所示：

Public-面向 .html 页面：

<div class="my-component"></div>

<pre>
  <code>
    @import "assets/stylesheets/colors";

    .my-component {
      color: $some-color;
    }
  </code>
</pre>

在 this example 之后，我能够创建自定义 <docs> 语言块：

.vue 文件:

<docs>
  @import "assets/stylesheets/colors";
  ...
</docs>

<style lang="scss">
  @import "assets/stylesheets/colors";
  ...
</style>

这有效，但它迫使我复制我的代码。如果我可以消除 <docs> 块并使用两个不同的加载器处理 <style> 块两次，那就更好了。不幸的是，我还没有找到这样做的方法。

我尝试了以下方法，希望 vue-loader 能够同时处理 <docs> 块和 <style> 块，但只有 <docs> 块正在处理（可能因为 <style> 块是嵌套的？），所以我的 SCSS 不再被编译并注入到页面中：

.vue 文件:

<docs>
  <style lang="scss">
    @import "assets/stylesheets/colors";
    ...
  </style>
</docs>

我正在使用 Nuxt Edge，其中包括 Webpack 4 和 Vue Loader 15。

Answer 1

您可以尝试将 css 分成单独的文件，如下所示：

<docs src="/the/path/component.scss"></docs>
<style src="/the/path/component.scss"></styles>

然后编写一个加载程序来读取文件的内容并呈现它。

Answer 2

在阅读了 Vue Loader 代码并进行了修改之后，我认为不可能运行一个块通过多组加载器（如果我错了请纠正我） .尽管如此，我还是找到了解决问题的合适方法：

我最终使用 Copy Webpack Plugin 复制了我的 .vue 文件并使用 .txt 扩展名保存它们。然后我通过 Axios（在客户端）请求它们，或者使用 FS 从文件系统（在服务器端）读取它们。然后我通过正则表达式提取 <style> 和 <script> 块。这并不理想，但它确实有效。

如何使 vue-loader 使用不同的加载器多次处理同一个块

How to make vue-loader process the same block multiple times, using different loaders

vue.js

vue-loader

nuxt.js