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

Question

我有一个简单的组件，您可以在此处看到，它使用 @ for addressing 通过 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>

这是我的故事，我导入这里但它似乎不起作用:

import Loading from "../src/views/components/loading/Loading";
import  "../src/assets/styles/components/_Loading.scss";
export default {
  title: "Loading"
};

export const normalLoading = () => ({
  components: { Loading },
  template: "<Loading></Loading>",
});

当我使用 npm 运行 storybook 时，它会显示两个错误，一个针对上述问题。我该如何解决这些问题？

更新

图片错误为：

    ERROR in ./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea&)
Module not found: Error: Can't resolve '@/assets/images/logo.png' in 'C:\Projects\my_github\vuejs-persian-chat-scaffold\src\views\components\loading'
 @ ./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea&) 15:22-57
 @ ./src/views/components/loading/Loading.vue?vue&type=template&id=1f4267ea&
 @ ./src/views/components/loading/Loading.vue
 @ ./stories/loading.stories.js
 @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\/])\.).)*?)[\/])?(?!\.)(?=.)[^\/]*?\.stories\.js[\/]?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

这是我的 ./storybook/webpack.config.js 文件，它正在处理像 import "../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

这个问题似乎很普遍，我在 https://github.com/storybookjs/storybook/issues/11117 上用 reprex 问了这个问题。

update3

我在 storybook GitHub 上问了这个问题，看来他们需要为此添加兼容模式，这就是 link 如果你愿意为 vuejs-webpack-storybook 做出贡献（ https://github.com/storybookjs/storybook/issues/11117)

Answer 1

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

所以，首先我隐藏了按照以下说明所做的所有更改 https://storybook.js.org/docs/guides/guide-vue/.

然后我通过使用 vue add storybook ( https://github.com/storybookjs/vue-cli-plugin-storybook ) 重新安装了故事书，它创建了一个包含来自 vue-cli 的 webpack 配置的文件夹，这意味着你不需要任何故事书配置文件夹中的特殊 webpack 部分。 @问题已经解决，一切正常

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

但是在 .scss url() 中寻址资产仍然有一个错误，例如内容：

url("assets/images/tick.svg");

我通过使用 ~@ 的相对寻址来修复它，如下所示：

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

工作示例在这里：

https://github.com/SeyyedKhandon/vuejs-persian-chat-scaffold

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

How can i import scss files and images in stories of storybook in vuejs?

javascript

sass

webpack

vue.js

storybook