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

Question

I have a simple component as you can see here, which imports an image via src="@/assets/images/logo.png" using @ 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>

And this is my story, which i imported here but it seems to not working:

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>",
});

When I use npm run storybook, it will show two errors, one for each one of the above issues. how should I fix these issues?

update

The error for image is:

    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

and here is my ./storybook/webpack.config.js file which is working on addressing like import "../src/assets/styles/components/_Loading.scss"; but i want to use @/ for addressing:

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;
};

Since it seems this problem is widespread, I asked on storybook's GitHub and it seems they need to add compatibility mode for this.

Answer 1

I've asked the question on storybook's github, and I got an answer to use vue-cli to fix the problem.

So, First I stashed all changes which have been made by following the instructions of https://storybook.js.org/docs/guides/guide-vue/ .

Then I've re-installed storybook via using vue add storybook ( https://github.com/storybookjs/vue-cli-plugin-storybook ) which creates a folder that contains webpack configs from vue-cli, which means you don't need to have any special webpack section in storybook config folder. the @ problem has been solved and every thing is fine

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

But still there was one error for addressing assets in .scss url() like content:

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

I fixed it by using relative addressing using ~@ together like below:

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

the working example is here:

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