Javascript 如何在vuejs中导入故事书故事中的scss文件和图像？

我有一个简单的组件，您可以在这里看到，它通过

src=“@/assets/images/logo.png”

导入图像，使用

@进行寻址

：

<template>
  <div class="loading_container">
    <img
      class="loading_logo"
      src="@/assets/images/logo.png"
      alt="company logo"
    />
    <div class="loading_box">
      <div class="loading_dot"></div>
      <div class="loading_dot"></div>
      <div class="loading_dot"></div>
      <div class="loading_dot"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
export default defineComponent({
  name: "Loading"
});
</script>

这是我的

/storybook/webpack.config.js

文件，它正在处理

导入“./src/assets/styles/components/_Loading.scss”之类的问题

但我想使用

@/

来寻址：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.scss$/,
    loaders: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
    include: path.resolve(__dirname, "../")
  });
  config.plugins.push(new MiniCssExtractPlugin({ filename: "[name].css" }));

  return config;
};

更新2

由于这个问题似乎很普遍，我向reprex提出了这个问题

更新3

---

我问了有关storybook GitHub的问题，他们似乎需要为此添加兼容模式，如果您愿意为vuejs webpack storybook（）提供帮助，这是一个链接。

我问了有关storybook GitHub的问题，我得到了使用vue cli解决问题的答案

因此，首先，我隐藏了所有按照

然后，我通过使用

vue add storybook

（）重新安装了storybook，它创建了一个包含vue cli中的webpack配置的文件夹，这意味着您不需要在storybook配置文件夹中有任何特殊的webpack部分。问题解决了，一切都很好

<img
  class="loading_logo"
  src="@/assets/images/logo.png"
  alt="company logo"
/>

我通过使用

~@

组合使用相对寻址修复了它，如下所示：

content: url("~@/assets/images/tick.svg");

工作示例如下：

---

我在storybook的github上问了一个问题，我得到了一个使用vue cli解决问题的答案

因此，首先，我隐藏了所有按照

然后，我通过使用

vue add storybook

（）重新安装了storybook，它创建了一个包含vue cli中的webpack配置的文件夹，这意味着您不需要在storybook配置文件夹中有任何特殊的webpack部分。问题解决了，一切都很好

<img
  class="loading_logo"
  src="@/assets/images/logo.png"
  alt="company logo"
/>

我通过使用

~@

组合使用相对寻址修复了它，如下所示：

content: url("~@/assets/images/tick.svg");

工作示例如下：

---

有哪些错误？我以前没有使用过storybook，但您可能需要将scss加载程序添加到项目中。img解析错误仅在使用

@

别名时显示？我在你的网页配置中没有看到这个。如果您使用的是

vue cli

，则可以使用

vue-inspect--rules

和

vue-inspect--rule

输入合并的网页配置，但如果使用

src=“/src/assets/images/logo.png”

，则可以使用

“故事书”：“启动故事书-s./-p 6006”

，运行故事书，它将正确运行和加载，但这不是我想要的。我只是想用@来解决这个问题。实际上，github上有很多关于

storybook.js

和其他使用webpack的框架相互干扰的问题。尝试在这些评论中找到解决方案。谷歌搜索更多讨论：

storybook js网页包别名“@”

也可以查看这些示例：“请注意，storybook有一个完全独立的网页包配置，用于其自己的UI（也称为“管理器”），因此您所做的自定义仅适用于故事的呈现”有哪些错误？我以前没有使用过storybook，但您可能需要将scss加载程序添加到项目中。img解析错误仅在使用

@

别名时显示？我在你的网页配置中没有看到这个。如果您使用的是

vue cli

，则可以使用

vue-inspect--rules

和

vue-inspect--rule

输入合并的网页配置，但如果使用

src=“/src/assets/images/logo.png”

，则可以使用

“故事书”：“启动故事书-s./-p 6006”

，运行故事书，它将正确运行和加载，但这不是我想要的。我只是想用@来解决这个问题。实际上，github上有很多关于

storybook.js

和其他使用webpack的框架相互干扰的问题。尝试在这些评论中找到解决方案。谷歌搜索更多讨论：

storybook js网页包别名“@”

还可以查看以下示例：“请注意，storybook有一个完全独立的网页包配置，用于其自己的UI（也称为“管理器”），因此您所做的自定义仅适用于故事的呈现”

content: url("~@/assets/images/tick.svg");