如何在 vue 中使用 raw-loader，在 scss 中使用 file-loader答案

【问题标题】：How can I use raw-loader in vue, and file-loader in scss如何在 vue 中使用 raw-loader，在 scss 中使用 file-loader
【发布时间】：2021-05-23 23:20:13
【问题描述】：

我希望 webpack 在 vue html 模板和 scss 中加载不同的文件。

<template>
  <!-- I want here to load it as inline svg -->
  <div v-html="require('./file.svg').default"></div>
</template>

<style lang="scss">
  .class {
    // but here I wan't to just get rewrite url to loaded file
    background: url('../file.svg'); 
  }
</style>

我在 webpack 中有这个配置，它适用于 scss 和 vue 文件

rules: [
  {
     test: /\.svg$/i,
     loader: 'file-loader'
  }
]

【问题讨论】：

标签： javascript vue.js webpack sass

【解决方案1】：

我无法解决这个问题，所以我找到了丑陋的解决方法。我为所有内容保留了文件加载器，但在 Vue html 模板中我直接指定使用 raw-loader

<template>
  <div v-html="require('!raw-loader!./file.svg').default"></div>
</template>

【讨论】：