Question

更新

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

原始问题：

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

面向公众的.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

在阅读了Vue Loader代码并四处破解之后，我认为无法通过多组加载程序运行一个块（如果我错了，请纠正我）。不过，我能够找到解决问题的合适方法：

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

Answer 2

您可以尝试将单独的CSS分成这样的单独文件：

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

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

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

2 个答案: