Question

我有一个简单的组件，如您在此处看到的那样，它使用src="@/assets/images/logo.png"通过@ for addressing导入图像：

<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 run 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一起问了这个问题。

更新3

我在故事书GitHub上问了一个问题，看来他们需要为此添加兼容模式，如果您愿意为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文件和图像？

1 个答案: